diff --git a/.vscode/settings.json b/.vscode/settings.json
index 396755a634..0e9dd5ce2c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -59,5 +59,6 @@
     "*.ts": "${capture}.spec.ts,${capture}.mock.ts"
   },
   "svelte.enable-ts-plugin": true,
-  "typescript.preferences.importModuleSpecifier": "non-relative"
+  "typescript.preferences.importModuleSpecifier": "non-relative",
+  "html.customData": [".web/node_modules/vidstack/vscode.html-data.json"]
 }
diff --git a/web/package-lock.json b/web/package-lock.json
index 75c55aa779..edd274be06 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -35,7 +35,8 @@
         "svelte-i18n": "^4.0.1",
         "svelte-maplibre": "^1.0.0",
         "svelte-persisted-store": "^0.12.0",
-        "thumbhash": "^0.1.1"
+        "thumbhash": "^0.1.1",
+        "vidstack": "^1.12.13"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3.1.0",
@@ -2442,6 +2443,12 @@
         "@types/geojson": "*"
       }
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.31.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.31.0.tgz",
@@ -5800,6 +5807,15 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "license": "MIT"
     },
+    "node_modules/lit-html": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz",
+      "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
     "node_modules/locate-character": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
@@ -6066,6 +6082,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/media-captions": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/media-captions/-/media-captions-1.0.4.tgz",
+      "integrity": "sha512-cyDNmuZvvO4H27rcBq2Eudxo9IZRDCOX/I7VEyqbxsEiD2Ei7UYUhG/Sc5fvMZjmathgz3fEK7iAKqvpY+Ux1w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/memoizee": {
       "version": "0.4.17",
       "resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.4.17.tgz",
@@ -8987,6 +9012,19 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/unplugin": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.16.1.tgz",
+      "integrity": "sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.14.0",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
@@ -9056,6 +9094,21 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "node_modules/vidstack": {
+      "version": "1.12.13",
+      "resolved": "https://registry.npmjs.org/vidstack/-/vidstack-1.12.13.tgz",
+      "integrity": "sha512-vuNeyRmWoH/7EoFVDYjp9nkgcqtCMmal518LDeb78dYKgWb+p6+vtY0AzDhrkBv5q1UiCn+xwmjMmwvSlPLuhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.6.10",
+        "lit-html": "^2.8.0",
+        "media-captions": "^1.0.4",
+        "unplugin": "^1.12.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/vite": {
       "version": "6.3.3",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.3.tgz",
@@ -9725,6 +9778,12 @@
         "node": ">=12"
       }
     },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+      "license": "MIT"
+    },
     "node_modules/whatwg-encoding": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
diff --git a/web/package.json b/web/package.json
index 7c5a0147bb..2cebe22aa9 100644
--- a/web/package.json
+++ b/web/package.json
@@ -51,7 +51,8 @@
     "svelte-i18n": "^4.0.1",
     "svelte-maplibre": "^1.0.0",
     "svelte-persisted-store": "^0.12.0",
-    "thumbhash": "^0.1.1"
+    "thumbhash": "^0.1.1",
+    "vidstack": "^1.12.13"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.1.0",
diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index 08772bcec4..0221040d6e 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -373,6 +373,10 @@
       handlePromiseError(handleGetAllAlbums());
     }
   });
+  let controlsVisible = $state(true);
+  const onControlsChange = ({ controlsVisible: visible }: { controlsVisible: boolean }) => {
+    controlsVisible = visible;
+  };
 </script>
 
 <svelte:document bind:fullscreenElement />
@@ -384,7 +388,12 @@
 >
   <!-- Top navigation bar -->
   {#if $slideshowState === SlideshowState.None && !isShowEditor}
-    <div class="z-[1002] col-span-4 col-start-1 row-span-1 row-start-1 transition-transform">
+    <div
+      class={[
+        { 'opacity-100': controlsVisible },
+        'z-[1002] col-span-4 col-start-1 row-span-1 row-start-1 transition-transform to-transparent opacity-0 transition-opacity ',
+      ]}
+    >
       <AssetViewerNavBar
         {asset}
         {album}
@@ -413,7 +422,12 @@
   {/if}
 
   {#if $slideshowState === SlideshowState.None && showNavigation && !isShowEditor}
-    <div class="z-[1001] my-auto column-span-1 col-start-1 row-span-full row-start-1 justify-self-start">
+    <div
+      class={[
+        { 'opacity-100': controlsVisible },
+        'to-transparent opacity-0 transition-opacity z-[1001] my-auto column-span-1 col-start-1 row-span-full row-start-1 justify-self-start',
+      ]}
+    >
       <PreviousAssetAction onPreviousAsset={() => navigateAsset('previous')} />
     </div>
   {/if}
@@ -453,9 +467,9 @@
             loopVideo={true}
             onPreviousAsset={() => navigateAsset('previous')}
             onNextAsset={() => navigateAsset('next')}
-            onClose={closeViewer}
             onVideoEnded={() => navigateAsset()}
             onVideoStarted={handleVideoStarted}
+            {onControlsChange}
           />
         {/if}
       {/key}
@@ -471,6 +485,7 @@
               onPreviousAsset={() => navigateAsset('previous')}
               onNextAsset={() => navigateAsset('next')}
               onVideoEnded={() => (shouldPlayMotionPhoto = false)}
+              {onControlsChange}
             />
           {:else if asset.exifInfo?.projectionType === ProjectionType.EQUIRECTANGULAR || (asset.originalPath && asset.originalPath
                 .toLowerCase()
@@ -498,9 +513,9 @@
             loopVideo={$slideshowState !== SlideshowState.PlaySlideshow}
             onPreviousAsset={() => navigateAsset('previous')}
             onNextAsset={() => navigateAsset('next')}
-            onClose={closeViewer}
             onVideoEnded={() => navigateAsset()}
             onVideoStarted={handleVideoStarted}
+            {onControlsChange}
           />
         {/if}
         {#if $slideshowState === SlideshowState.None && isShared && ((album && album.isActivityEnabled) || activityManager.commentCount > 0)}
@@ -519,7 +534,12 @@
   </div>
 
   {#if $slideshowState === SlideshowState.None && showNavigation && !isShowEditor}
-    <div class="z-[1001] my-auto col-span-1 col-start-4 row-span-full row-start-1 justify-self-end">
+    <div
+      class={[
+        { 'opacity-100': controlsVisible },
+        'to-transparent opacity-0 transition-opacity z-[1001] my-auto col-span-1 col-start-4 row-span-full row-start-1 justify-self-end',
+      ]}
+    >
       <NextAssetAction onNextAsset={() => navigateAsset('next')} />
     </div>
   {/if}
diff --git a/web/src/lib/components/asset-viewer/navigation-area.svelte b/web/src/lib/components/asset-viewer/navigation-area.svelte
index 88f0baf0bc..77c335a25d 100644
--- a/web/src/lib/components/asset-viewer/navigation-area.svelte
+++ b/web/src/lib/components/asset-viewer/navigation-area.svelte
@@ -12,7 +12,7 @@
 
 <button
   type="button"
-  class="my-auto mx-4 rounded-full p-3 text-gray-500 transition hover:bg-gray-500 hover:text-white"
+  class="my-auto mx-4 rounded-full p-3 text-gray-500 transition hover:bg-white/20 hover:text-white"
   aria-label={label}
   onclick={onClick}
 >
diff --git a/web/src/lib/components/asset-viewer/video-native-viewer.svelte b/web/src/lib/components/asset-viewer/video-native-viewer.svelte
deleted file mode 100644
index 07760b3c6b..0000000000
--- a/web/src/lib/components/asset-viewer/video-native-viewer.svelte
+++ /dev/null
@@ -1,147 +0,0 @@
-<script lang="ts">
-  import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
-  import { loopVideo as loopVideoPreference, videoViewerMuted, videoViewerVolume } from '$lib/stores/preferences.store';
-  import { getAssetPlaybackUrl, getAssetThumbnailUrl } from '$lib/utils';
-  import { handleError } from '$lib/utils/handle-error';
-  import { AssetMediaSize } from '@immich/sdk';
-  import { onDestroy, onMount } from 'svelte';
-  import { swipe } from 'svelte-gestures';
-  import type { SwipeCustomEvent } from 'svelte-gestures';
-  import { fade } from 'svelte/transition';
-  import { t } from 'svelte-i18n';
-  import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
-  import FaceEditor from '$lib/components/asset-viewer/face-editor/face-editor.svelte';
-
-  interface Props {
-    assetId: string;
-    loopVideo: boolean;
-    cacheKey: string | null;
-    onPreviousAsset?: () => void;
-    onNextAsset?: () => void;
-    onVideoEnded?: () => void;
-    onVideoStarted?: () => void;
-    onClose?: () => void;
-  }
-
-  let {
-    assetId,
-    loopVideo,
-    cacheKey,
-    onPreviousAsset = () => {},
-    onNextAsset = () => {},
-    onVideoEnded = () => {},
-    onVideoStarted = () => {},
-    onClose = () => {},
-  }: Props = $props();
-
-  let videoPlayer: HTMLVideoElement | undefined = $state();
-  let isLoading = $state(true);
-  let assetFileUrl = $state('');
-  let forceMuted = $state(false);
-  let isScrubbing = $state(false);
-
-  onMount(() => {
-    if (videoPlayer) {
-      assetFileUrl = getAssetPlaybackUrl({ id: assetId, cacheKey });
-      forceMuted = false;
-      videoPlayer.load();
-    }
-  });
-
-  onDestroy(() => {
-    if (videoPlayer) {
-      videoPlayer.src = '';
-    }
-  });
-
-  const handleCanPlay = async (video: HTMLVideoElement) => {
-    try {
-      if (!video.paused && !isScrubbing) {
-        await video.play();
-        onVideoStarted();
-      }
-    } catch (error) {
-      if (error instanceof DOMException && error.name === 'NotAllowedError' && !forceMuted) {
-        await tryForceMutedPlay(video);
-        return;
-      }
-
-      handleError(error, $t('errors.unable_to_play_video'));
-    } finally {
-      isLoading = false;
-    }
-  };
-
-  const tryForceMutedPlay = async (video: HTMLVideoElement) => {
-    try {
-      video.muted = true;
-      await handleCanPlay(video);
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_play_video'));
-    }
-  };
-
-  const onSwipe = (event: SwipeCustomEvent) => {
-    if (event.detail.direction === 'left') {
-      onNextAsset();
-    }
-    if (event.detail.direction === 'right') {
-      onPreviousAsset();
-    }
-  };
-
-  let containerWidth = $state(0);
-  let containerHeight = $state(0);
-
-  $effect(() => {
-    if (isFaceEditMode.value) {
-      videoPlayer?.pause();
-    }
-  });
-</script>
-
-<div
-  transition:fade={{ duration: 150 }}
-  class="flex h-full select-none place-content-center place-items-center"
-  bind:clientWidth={containerWidth}
-  bind:clientHeight={containerHeight}
->
-  <video
-    bind:this={videoPlayer}
-    loop={$loopVideoPreference && loopVideo}
-    autoplay
-    playsinline
-    controls
-    class="h-full object-contain"
-    use:swipe={() => ({})}
-    onswipe={onSwipe}
-    oncanplay={(e) => handleCanPlay(e.currentTarget)}
-    onended={onVideoEnded}
-    onvolumechange={(e) => {
-      if (!forceMuted) {
-        $videoViewerMuted = e.currentTarget.muted;
-      }
-    }}
-    onseeking={() => (isScrubbing = true)}
-    onseeked={() => (isScrubbing = false)}
-    onplaying={(e) => {
-      e.currentTarget.focus();
-    }}
-    onclose={() => onClose()}
-    muted={forceMuted || $videoViewerMuted}
-    bind:volume={$videoViewerVolume}
-    poster={getAssetThumbnailUrl({ id: assetId, size: AssetMediaSize.Preview, cacheKey })}
-    src={assetFileUrl}
-  >
-  </video>
-
-  {#if isLoading}
-    <div class="absolute flex place-content-center place-items-center">
-      <LoadingSpinner />
-    </div>
-  {/if}
-
-  {#if isFaceEditMode.value}
-    <FaceEditor htmlElement={videoPlayer} {containerWidth} {containerHeight} {assetId} />
-  {/if}
-</div>
diff --git a/web/src/lib/components/asset-viewer/video-viewer/buttons/airplay-button.svelte b/web/src/lib/components/asset-viewer/video-viewer/buttons/airplay-button.svelte
new file mode 100644
index 0000000000..470e6a369b
--- /dev/null
+++ b/web/src/lib/components/asset-viewer/video-viewer/buttons/airplay-button.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { mdiCastVariant } from '@mdi/js';
+  import type { TooltipPlacement } from 'vidstack';
+  import Tooltip from '../tooltip.svelte';
+  type Props = {
+    tooltipPlacement: TooltipPlacement;
+  };
+
+  let { tooltipPlacement }: Props = $props();
+</script>
+
+<Tooltip placement={tooltipPlacement}>
+  {#snippet trigger()}
+    <media-airplay-button
+      class="ring-media-focus text-white group relative mr-0.5 inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-md outline-none ring-inset hover:bg-white/20 data-[focus]:ring-4 aria-hidden:hidden"
+    >
+      <Icon class=" w-5 h-5" path={mdiCastVariant} color="currentColor"></Icon>
+    </media-airplay-button>
+  {/snippet}
+
+  {#snippet content()}
+    <span>Enter Airplay</span>
+  {/snippet}
+</Tooltip>
diff --git a/web/src/lib/components/asset-viewer/video-viewer/buttons/fullscreen-button.svelte b/web/src/lib/components/asset-viewer/video-viewer/buttons/fullscreen-button.svelte
new file mode 100644
index 0000000000..8ec863abb1
--- /dev/null
+++ b/web/src/lib/components/asset-viewer/video-viewer/buttons/fullscreen-button.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { mdiFullscreen, mdiFullscreenExit } from '@mdi/js';
+  import type { TooltipPlacement } from 'vidstack';
+  import Tooltip from '../tooltip.svelte';
+  type Props = {
+    tooltipPlacement: TooltipPlacement;
+  };
+
+  let { tooltipPlacement }: Props = $props();
+</script>
+
+<Tooltip placement={tooltipPlacement}>
+  {#snippet trigger()}
+    <media-fullscreen-button
+      class="ring-media-focus text-white group relative mr-0.5 inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-md outline-none ring-inset hover:bg-white/20 data-[focus]:ring-4 aria-hidden:hidden"
+    >
+      <Icon class="media-pip:hidden w-6 h-6" path={mdiFullscreen} color="currentColor"></Icon>
+      <Icon class="not-media-pip:hidden" path={mdiFullscreenExit} color="currentColor"></Icon>
+    </media-fullscreen-button>
+  {/snippet}
+
+  {#snippet content()}
+    <span class="media-pip:hidden">Enter Fullscreen</span>
+    <span class="media-pip:block hidden">Exit Fullscreen</span>
+  {/snippet}
+</Tooltip>
diff --git a/web/src/lib/components/asset-viewer/video-viewer/buttons/google-cast-button.svelte b/web/src/lib/components/asset-viewer/video-viewer/buttons/google-cast-button.svelte
new file mode 100644
index 0000000000..ae9a473e4c
--- /dev/null
+++ b/web/src/lib/components/asset-viewer/video-viewer/buttons/google-cast-button.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { mdiCastVariant } from '@mdi/js';
+  import type { TooltipPlacement } from 'vidstack';
+  import Tooltip from '../tooltip.svelte';
+  type Props = {
+    tooltipPlacement: TooltipPlacement;
+  };
+
+  let { tooltipPlacement }: Props = $props();
+</script>
+
+<Tooltip placement={tooltipPlacement}>
+  {#snippet trigger()}
+    <media-google-cast-button
+      class="ring-media-focus text-white group relative mr-0.5 inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-md outline-none ring-inset hover:bg-white/20 data-[focus]:ring-4 aria-hidden:hidden"
+    >
+      <Icon class=" w-5 h-5" path={mdiCastVariant} color="currentColor"></Icon>
+    </media-google-cast-button>
+  {/snippet}
+
+  {#snippet content()}
+    <span>Google Cast</span>
+  {/snippet}
+</Tooltip>
diff --git a/web/src/lib/components/asset-viewer/video-viewer/buttons/mute-button.svelte b/web/src/lib/components/asset-viewer/video-viewer/buttons/mute-button.svelte
new file mode 100644
index 0000000000..9aca0f3d0a
--- /dev/null
+++ b/web/src/lib/components/asset-viewer/video-viewer/buttons/mute-button.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { mdiVolumeHigh, mdiVolumeLow, mdiVolumeMute } from '@mdi/js';
+  import type { TooltipPlacement } from 'vidstack';
+  import Tooltip from '../tooltip.svelte';
+
+  type Props = {
+    tooltipPlacement: TooltipPlacement;
+  };
+
+  let { tooltipPlacement }: Props = $props();
+</script>
+
+<Tooltip placement={tooltipPlacement}>
+  {#snippet trigger()}
+    <media-mute-button
+      class="ring-media-focus group text-white relative inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-md outline-none ring-inset hover:bg-white/20 data-[focus]:ring-4"
+    >
+      <Icon class="w-6 h-6 hidden group-data-[state='muted']:block" path={mdiVolumeMute} color="currentColor" />
+      <Icon class="w-6 h-6 hidden group-data-[state='low']:block" path={mdiVolumeLow} color="currentColor" />
+      <Icon class="w-6 h-6 hidden group-data-[state='high']:block" path={mdiVolumeHigh} color="currentColor" />
+    </media-mute-button>
+  {/snippet}
+
+  {#snippet content()}
+    <span class="media-muted:hidden">Mute</span>
+    <span class="media-muted:block hidden">Unmute</span>
+  {/snippet}
+</Tooltip>
diff --git a/web/src/lib/components/asset-viewer/video-viewer/buttons/pip-button.svelte b/web/src/lib/components/asset-viewer/video-viewer/buttons/pip-button.svelte
new file mode 100644
index 0000000000..ce060eb977
--- /dev/null
+++ b/web/src/lib/components/asset-viewer/video-viewer/buttons/pip-button.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { mdiPictureInPictureBottomRight, mdiSquare } from '@mdi/js';
+  import type { TooltipPlacement } from 'vidstack';
+  import Tooltip from '../tooltip.svelte';
+  type Props = {
+    tooltipPlacement: TooltipPlacement;
+  };
+
+  let { tooltipPlacement }: Props = $props();
+</script>
+
+<Tooltip placement={tooltipPlacement}>
+  {#snippet trigger()}
+    <media-pip-button
+      class="ring-media-focus text-white group relative mr-0.5 inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-md outline-none ring-inset hover:bg-white/20 data-[focus]:ring-4 aria-hidden:hidden"
+    >
+      <Icon class="media-pip:hidden w-5 h-5" path={mdiPictureInPictureBottomRight} color="currentColor"></Icon>
+      <Icon class="not-media-pip:hidden w-5 h-5" path={mdiSquare} color="currentColor"></Icon>
+    </media-pip-button>
+  {/snippet}
+
+  {#snippet content()}
+    <span class="media-pip:hidden">Enter PIP</span>
+    <span class="media-pip:block hidden">Exit PIP</span>
+  {/snippet}
+</Tooltip>
diff --git a/web/src/lib/components/asset-viewer/video-viewer/buttons/play-button.svelte b/web/src/lib/components/asset-viewer/video-viewer/buttons/play-button.svelte
new file mode 100644
index 0000000000..af931e299b
--- /dev/null
+++ b/web/src/lib/components/asset-viewer/video-viewer/buttons/play-button.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { mdiPause, mdiPlay } from '@mdi/js';
+  import type { TooltipPlacement } from 'vidstack';
+  import Tooltip from '../tooltip.svelte';
+
+  type Props = {
+    tooltipPlacement: TooltipPlacement;
+  };
+
+  let { tooltipPlacement }: Props = $props();
+</script>
+
+<Tooltip placement={tooltipPlacement}>
+  {#snippet trigger()}
+    <media-play-button
+      class="ring-media-focus text-white relative inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-md outline-none ring-inset hover:bg-white/20 data-[focus]:ring-4"
+    >
+      <Icon class="w-5 h-5 media-playing:hidden" path={mdiPlay} color="currentColor" />
+      <Icon class="w-5 h-5 media-paused:hidden" path={mdiPause} color="currentColor" />
+    </media-play-button>
+  {/snippet}
+
+  {#snippet content()}
+    <span class="media-playing:hidden">Play</span>
+    <span class="media-paused:hidden">Pause</span>
+  {/snippet}
+</Tooltip>
diff --git a/web/src/lib/components/asset-viewer/video-viewer/groups/time-group.svelte b/web/src/lib/components/asset-viewer/video-viewer/groups/time-group.svelte
new file mode 100644
index 0000000000..7f3da3119c
--- /dev/null
+++ b/web/src/lib/components/asset-viewer/video-viewer/groups/time-group.svelte
@@ -0,0 +1,11 @@
+<div class="ml-1.5 flex items-center text-sm font-medium">
+  <media-time class="time text-white" type="current"></media-time>
+  <div class="mx-1 text-white/80">/</div>
+  <media-time class="time text-white" type="duration"></media-time>
+</div>
+
+<style>
+  .time {
+    contain: content;
+  }
+</style>
diff --git a/web/src/lib/components/asset-viewer/video-viewer/sliders/slider-chapters.svelte b/web/src/lib/components/asset-viewer/video-viewer/sliders/slider-chapters.svelte
new file mode 100644
index 0000000000..767107e94d
--- /dev/null
+++ b/web/src/lib/components/asset-viewer/video-viewer/sliders/slider-chapters.svelte
@@ -0,0 +1,22 @@
+<media-slider-chapters class="relative flex h-full w-full items-center rounded-[1px]">
+  <template>
+    <!-- Chapter -->
+    <div class="chapter last-child:mr-0 relative mr-0.5 flex h-full w-full items-center rounded-[1px]">
+      <!-- Track -->
+      <div class="ring-media-focus relative z-0 h-[5px] w-full rounded-sm bg-white/30 group-data-[focus]:ring-[3px]">
+        <div class="bg-media-brand absolute h-full w-[var(--chapter-fill)] rounded-sm will-change-[width]"></div>
+        <div class="absolute z-10 h-full w-[var(--chapter-progress)] rounded-sm bg-white/50 will-change-[width]"></div>
+      </div>
+      <!-- Progress -->
+      <div
+        class="absolute left-0 top-1/2 z-10 h-[5px] w-[var(--chapter-progress)] -translate-y-1/2 rounded-sm bg-white/50 will-change-[width]"
+      ></div>
+    </div>
+  </template>
+</media-slider-chapters>
+
+<style scoped>
+  .chapter {
+    contain: layout style;
+  }
+</style>
diff --git a/web/src/lib/components/asset-viewer/video-viewer/sliders/slider-preview.svelte b/web/src/lib/components/asset-viewer/video-viewer/sliders/slider-preview.svelte
new file mode 100644
index 0000000000..17653664f8
--- /dev/null
+++ b/web/src/lib/components/asset-viewer/video-viewer/sliders/slider-preview.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    thumbnails?: string;
+    noClamp?: boolean;
+    children?: Snippet;
+  };
+  const { thumbnails, noClamp, children }: Props = $props();
+</script>
+
+<media-slider-preview
+  class="flex flex-col items-center opacity-0 transition-opacity duration-200 data-[visible]:opacity-100 pointer-events-none"
+  {noClamp}
+>
+  {#if thumbnails}
+    <media-slider-thumbnail
+      class="block h-[var(--thumbnail-height)] max-h-[160px] min-h-[80px] w-[var(--thumbnail-width)] min-w-[120px] max-w-[180px] overflow-hidden border border-white bg-black"
+      src={thumbnails}
+    ></media-slider-thumbnail>
+  {/if}
+
+  {@render children?.()}
+</media-slider-preview>
diff --git a/web/src/lib/components/asset-viewer/video-viewer/sliders/slider-thumb.svelte b/web/src/lib/components/asset-viewer/video-viewer/sliders/slider-thumb.svelte
new file mode 100644
index 0000000000..70ee3540e6
--- /dev/null
+++ b/web/src/lib/components/asset-viewer/video-viewer/sliders/slider-thumb.svelte
@@ -0,0 +1,3 @@
+<div
+  class="absolute left-[var(--slider-fill)] top-1/2 z-20 h-[15px] w-[15px] -translate-x-1/2 -translate-y-1/2 rounded-full border border-[#cacaca] bg-white opacity-0 ring-white/40 transition-opacity group-data-[active]:opacity-100 group-data-[dragging]:ring-4 will-change-[left]"
+></div>
diff --git a/web/src/lib/components/asset-viewer/video-viewer/sliders/time-slider.svelte b/web/src/lib/components/asset-viewer/video-viewer/sliders/time-slider.svelte
new file mode 100644
index 0000000000..94bf79019c
--- /dev/null
+++ b/web/src/lib/components/asset-viewer/video-viewer/sliders/time-slider.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import SliderChapters from '$lib/components/asset-viewer/video-viewer/sliders/slider-chapters.svelte';
+  import SliderPreview from '$lib/components/asset-viewer/video-viewer/sliders/slider-preview.svelte';
+  import SliderThumb from '$lib/components/asset-viewer/video-viewer/sliders/slider-thumb.svelte';
+  type Props = {
+    thumbnails?: string;
+  };
+  const { thumbnails }: Props = $props();
+</script>
+
+<media-time-slider
+  class="group text-white relative mx-[7.5px] -mt-1.5 inline-flex h-10 w-full cursor-pointer touch-none select-none items-center outline-none"
+>
+  <SliderChapters />
+  <SliderThumb />
+  <SliderPreview {thumbnails}>
+    <div class="mt-2 text-sm" data-part="chapter-title"></div>
+    <media-slider-value class="relative top-3 text-[13px]"></media-slider-value>
+  </SliderPreview>
+</media-time-slider>
diff --git a/web/src/lib/components/asset-viewer/video-viewer/sliders/volume-slider.svelte b/web/src/lib/components/asset-viewer/video-viewer/sliders/volume-slider.svelte
new file mode 100644
index 0000000000..e2328a7dae
--- /dev/null
+++ b/web/src/lib/components/asset-viewer/video-viewer/sliders/volume-slider.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import SliderThumb from '$lib/components/asset-viewer/video-viewer/sliders/slider-thumb.svelte';
+  import SliderPreview from './slider-preview.svelte';
+</script>
+
+<media-volume-slider
+  class="group relative mx-[7.5px] inline-flex h-10 w-full max-w-[80px] cursor-pointer touch-none select-none items-center outline-none aria-hidden:hidden"
+>
+  <!-- Track -->
+  <div class="ring-media-focus relative z-0 h-[5px] w-full rounded-sm bg-white/30 group-data-[focus]:ring-[3px]">
+    <div class="bg-white absolute h-full w-[var(--slider-fill)] rounded-sm will-change-[width]"></div>
+  </div>
+  <SliderThumb></SliderThumb>
+  <SliderPreview noClamp>
+    <media-slider-value class="rounded-sm bg-black px-2 py-px text-[13px] font-medium"></media-slider-value>
+  </SliderPreview>
+</media-volume-slider>
diff --git a/web/src/lib/components/asset-viewer/video-viewer/tooltip.svelte b/web/src/lib/components/asset-viewer/video-viewer/tooltip.svelte
new file mode 100644
index 0000000000..c7c4e4a584
--- /dev/null
+++ b/web/src/lib/components/asset-viewer/video-viewer/tooltip.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { TooltipPlacement } from 'vidstack';
+  type Props = {
+    placement: TooltipPlacement;
+    content?: Snippet;
+    trigger?: Snippet;
+  };
+
+  let { placement, content, trigger }: Props = $props();
+</script>
+
+<media-tooltip>
+  <media-tooltip-trigger>
+    {@render trigger?.()}
+  </media-tooltip-trigger>
+  <media-tooltip-content
+    class="tooltip animate-out fade-out slide-out-to-bottom-2 data-[visible]:animate-in data-[visible]:fade-in data-[visible]:slide-in-from-bottom-4 z-10 rounded-sm bg-black/90 px-2 py-0.5 text-sm font-medium text-white"
+    {placement}
+  >
+    {@render content?.()}
+  </media-tooltip-content>
+</media-tooltip>
+
+<style>
+  :global(media-menu[data-open]) .tooltip {
+    display: none !important;
+  }
+</style>
diff --git a/web/src/lib/components/asset-viewer/video-viewer/video-layout.svelte b/web/src/lib/components/asset-viewer/video-viewer/video-layout.svelte
new file mode 100644
index 0000000000..2d705437f1
--- /dev/null
+++ b/web/src/lib/components/asset-viewer/video-viewer/video-layout.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+  import AirplayButton from '$lib/components/asset-viewer/video-viewer/buttons/airplay-button.svelte';
+  import FullscreenButton from '$lib/components/asset-viewer/video-viewer/buttons/fullscreen-button.svelte';
+  import GoogleCastButton from '$lib/components/asset-viewer/video-viewer/buttons/google-cast-button.svelte';
+  import MuteButton from '$lib/components/asset-viewer/video-viewer/buttons/mute-button.svelte';
+  import PIPButton from '$lib/components/asset-viewer/video-viewer/buttons/pip-button.svelte';
+  import PlayButton from '$lib/components/asset-viewer/video-viewer/buttons/play-button.svelte';
+  import TimeGroup from './groups/time-group.svelte';
+  import TimeSlider from './sliders/time-slider.svelte';
+  import VolumeSlider from './sliders/volume-slider.svelte';
+</script>
+
+<media-gesture class="absolute inset-0 z-0 block h-full w-full" event="pointerup" action="toggle:paused"
+></media-gesture>
+<media-gesture class="absolute inset-0 z-0 block h-full w-full" event="dblpointerup" action="toggle:fullscreen"
+></media-gesture>
+<media-gesture class="absolute left-0 top-0 z-10 block h-full w-1/5" event="dblpointerup" action="seek:-10"
+></media-gesture>
+<media-gesture class="absolute right-0 top-0 z-10 block h-full w-1/5" event="dblpointerup" action="seek:10"
+></media-gesture>
+
+<div>
+  <media-controls
+    class="media-controls:opacity-100 absolute inset-0 h-full w-full flex flex-col bg-gradient-to-t from-black/10 to-transparent opacity-0 transition-opacity"
+  >
+    <div class="flex-1"></div>
+    <media-controls-group class="flex w-full items-center px-2 -mb-2">
+      <TimeSlider></TimeSlider>
+    </media-controls-group>
+    <media-controls-group class="pl-1 pr-1 pb-2 flex w-full items-center">
+      <PlayButton tooltipPlacement="top start" />
+      <MuteButton tooltipPlacement="top start" />
+      <VolumeSlider />
+      <TimeGroup />
+      <div class="flex-1"></div>
+      <AirplayButton tooltipPlacement="top" />
+      <GoogleCastButton tooltipPlacement="top" />
+      <PIPButton tooltipPlacement="top"></PIPButton>
+      <FullscreenButton tooltipPlacement="top end" />
+    </media-controls-group>
+  </media-controls>
+</div>
+
+<style scoped>
+  media-controls {
+    /* These CSS variables apply offsets to all tooltips/menus.  */
+    --media-tooltip-y-offset: 30px;
+    --media-menu-y-offset: 30px;
+  }
+
+  media-controls :global(media-volume-slider) {
+    --media-slider-preview-offset: 30px;
+  }
+</style>
diff --git a/web/src/lib/components/asset-viewer/video-viewer/video-native-viewer.svelte b/web/src/lib/components/asset-viewer/video-viewer/video-native-viewer.svelte
new file mode 100644
index 0000000000..5d68bd36d4
--- /dev/null
+++ b/web/src/lib/components/asset-viewer/video-viewer/video-native-viewer.svelte
@@ -0,0 +1,150 @@
+<script lang="ts">
+  import FaceEditor from '$lib/components/asset-viewer/face-editor/face-editor.svelte';
+  import VideoLayout from '$lib/components/asset-viewer/video-viewer/video-layout.svelte';
+  import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
+  import { loopVideo as loopVideoPreference, videoViewerMuted, videoViewerVolume } from '$lib/stores/preferences.store';
+  import { getAssetPlaybackUrl, getAssetThumbnailUrl } from '$lib/utils';
+  import { handleError } from '$lib/utils/handle-error';
+  import { AssetMediaSize } from '@immich/sdk';
+  import { tick } from 'svelte';
+  import type { SwipeCustomEvent } from 'svelte-gestures';
+  import { swipe } from 'svelte-gestures';
+  import { t } from 'svelte-i18n';
+  import { fade } from 'svelte/transition';
+  import type { MediaAutoPlayFailEvent, MediaVolumeChangeEvent } from 'vidstack';
+  import 'vidstack/player';
+  import 'vidstack/player/styles/base.css';
+  import 'vidstack/player/ui';
+
+  import type { MediaPlayerElement } from 'vidstack/elements';
+  interface Props {
+    assetId: string;
+    loopVideo: boolean;
+    cacheKey: string | null;
+    onPreviousAsset?: () => void;
+    onNextAsset?: () => void;
+    onVideoEnded?: () => void;
+    onVideoStarted?: () => void;
+    onControlsChange?: ({ controlsVisible }: { controlsVisible: boolean }) => void;
+  }
+
+  let {
+    assetId,
+    loopVideo,
+    cacheKey,
+    onPreviousAsset = () => {},
+    onNextAsset = () => {},
+    onVideoEnded = () => {},
+    onVideoStarted = () => {},
+    onControlsChange = () => {},
+  }: Props = $props();
+
+  let player: MediaPlayerElement | undefined = $state();
+
+  let assetFileUrl = $derived(getAssetPlaybackUrl({ id: assetId, cacheKey }));
+  let videoElement = $derived(player?.querySelector('video') as HTMLVideoElement);
+
+  let forceMuted = $state(false);
+  let containerWidth = $state(0);
+  let containerHeight = $state(0);
+
+  const streamType = 'on-demand';
+  const logLevel: 'silent' | 'error' | 'warn' | 'info' | 'debug' = 'error';
+
+  const onSwipe = (event: SwipeCustomEvent) => {
+    if (event.detail.direction === 'left') {
+      onNextAsset();
+    }
+    if (event.detail.direction === 'right') {
+      onPreviousAsset();
+    }
+  };
+
+  $effect(() => {
+    if (isFaceEditMode.value) {
+      void player?.pause();
+    }
+  });
+</script>
+
+<div
+  transition:fade={{ duration: 150 }}
+  class="flex h-full select-none place-content-center place-items-center"
+  bind:clientWidth={containerWidth}
+  bind:clientHeight={containerHeight}
+  use:swipe={() => ({})}
+  onswipe={onSwipe}
+>
+  {// vidstack is missing some types for svelte5 event syntax: onauto-play-fail
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  /* @ts-ignore */ undefined}
+  <media-player
+    class="h-full w-full ring-media-focus data-[focus]:ring-4"
+    bind:this={player}
+    src={assetFileUrl}
+    poster={getAssetThumbnailUrl({ id: assetId, size: AssetMediaSize.Preview, cacheKey })}
+    {logLevel}
+    {streamType}
+    loop={$loopVideoPreference && loopVideo}
+    playsInline
+    autoPlay
+    load="idle"
+    viewType="video"
+    oncontrols-change={(e: CustomEvent) => {
+      onControlsChange?.({ controlsVisible: e.detail as boolean });
+    }}
+    muted={forceMuted || $videoViewerMuted}
+    onauto-play-fail={async (e: MediaAutoPlayFailEvent) => {
+      if (e.detail.error.name === 'NotAllowedError') {
+        forceMuted = true;
+        try {
+          await tick();
+          await player?.play();
+        } catch (error) {
+          handleError(error, $t('errors.unable_to_play_video'));
+        }
+      }
+    }}
+    onvolume-change={(e: MediaVolumeChangeEvent) => {
+      if (forceMuted && !e.detail.muted && e.detail.volume > 0) {
+        forceMuted = false;
+      }
+      if (!forceMuted) {
+        $videoViewerVolume = e.detail.volume;
+        $videoViewerMuted = e.detail.muted;
+      }
+    }}
+    onended={onVideoEnded}
+    onstarted={() => {
+      if (!forceMuted) {
+        player!.volume = $videoViewerVolume;
+        player!.muted = $videoViewerMuted;
+      }
+      onVideoStarted();
+    }}
+  >
+    <media-provider>
+      <media-poster
+        class="absolute inset-0 block h-full w-full rounded-md opacity-0 transition-opacity data-[visible]:opacity-100"
+        src={getAssetThumbnailUrl({ id: assetId, size: AssetMediaSize.Preview, cacheKey })}
+      ></media-poster>
+    </media-provider>
+    <VideoLayout />
+  </media-player>
+  {#if isFaceEditMode.value}
+    <FaceEditor htmlElement={videoElement} {containerWidth} {containerHeight} {assetId} />
+  {/if}
+</div>
+
+<style>
+  :global {
+    media-player video {
+      height: 100%;
+    }
+    media-poster img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+</style>
diff --git a/web/src/lib/components/asset-viewer/video-wrapper-viewer.svelte b/web/src/lib/components/asset-viewer/video-wrapper-viewer.svelte
index a5a94d85d4..f27ee1c4c0 100644
--- a/web/src/lib/components/asset-viewer/video-wrapper-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/video-wrapper-viewer.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
-  import { ProjectionType } from '$lib/constants';
-  import VideoNativeViewer from '$lib/components/asset-viewer/video-native-viewer.svelte';
   import VideoPanoramaViewer from '$lib/components/asset-viewer/video-panorama-viewer.svelte';
+  import VideoNativeViewer from '$lib/components/asset-viewer/video-viewer/video-native-viewer.svelte';
+  import { ProjectionType } from '$lib/constants';
 
   interface Props {
     assetId: string;
     projectionType: string | null | undefined;
     cacheKey: string | null;
     loopVideo: boolean;
-    onClose?: () => void;
     onPreviousAsset?: () => void;
     onNextAsset?: () => void;
     onVideoEnded?: () => void;
     onVideoStarted?: () => void;
+    onControlsChange?: ({ controlsVisible }: { controlsVisible: boolean }) => void;
   }
 
   let {
@@ -21,10 +21,10 @@
     cacheKey,
     loopVideo,
     onPreviousAsset,
-    onClose,
     onNextAsset,
     onVideoEnded,
     onVideoStarted,
+    onControlsChange,
   }: Props = $props();
 </script>
 
@@ -39,6 +39,6 @@
     {onNextAsset}
     {onVideoEnded}
     {onVideoStarted}
-    {onClose}
+    {onControlsChange}
   />
 {/if}
diff --git a/web/src/lib/components/photos-page/asset-grid.svelte b/web/src/lib/components/photos-page/asset-grid.svelte
index 7d496b7e3f..cb1d66ef94 100644
--- a/web/src/lib/components/photos-page/asset-grid.svelte
+++ b/web/src/lib/components/photos-page/asset-grid.svelte
@@ -1,32 +1,32 @@
 <script lang="ts">
   import { afterNavigate, beforeNavigate, goto } from '$app/navigation';
+  import { page } from '$app/stores';
+  import { resizeObserver, type OnResizeCallback } from '$lib/actions/resize-observer';
   import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
   import type { Action } from '$lib/components/asset-viewer/actions/action';
+  import AssetViewer from '$lib/components/asset-viewer/asset-viewer.svelte';
+  import Skeleton from '$lib/components/photos-page/skeleton.svelte';
   import { AppRoute, AssetAction } from '$lib/constants';
+  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { AssetBucket, assetsSnapshot, AssetStore, isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
+  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
   import { showDeleteModal } from '$lib/stores/preferences.store';
   import { searchStore } from '$lib/stores/search.svelte';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { handlePromiseError } from '$lib/utils';
   import { deleteAssets, updateStackedAssetInTimeline, updateUnstackedAssetInTimeline } from '$lib/utils/actions';
   import { archiveAssets, cancelMultiselect, selectAllAssets, stackAssets } from '$lib/utils/asset-utils';
+  import { focusNext } from '$lib/utils/focus-util';
   import { navigate } from '$lib/utils/navigation';
   import { type ScrubberListener } from '$lib/utils/timeline-util';
   import type { AlbumResponseDto, AssetResponseDto, PersonResponseDto } from '@immich/sdk';
   import { onMount, type Snippet } from 'svelte';
-  import Portal from '../shared-components/portal/portal.svelte';
+  import type { UpdatePayload } from 'vite';
   import Scrubber from '../shared-components/scrubber/scrubber.svelte';
   import ShowShortcuts from '../shared-components/show-shortcuts.svelte';
   import AssetDateGroup from './asset-date-group.svelte';
   import DeleteAssetDialog from './delete-asset-dialog.svelte';
-  import { resizeObserver, type OnResizeCallback } from '$lib/actions/resize-observer';
-  import Skeleton from '$lib/components/photos-page/skeleton.svelte';
-  import { page } from '$app/stores';
-  import type { UpdatePayload } from 'vite';
-  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
-  import { focusNext } from '$lib/utils/focus-util';
 
   interface Props {
     isSelectionMode?: boolean;
@@ -802,26 +802,22 @@
   </section>
 </section>
 
-<Portal target="body">
-  {#if $showAssetViewer}
-    {#await import('../asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
-      <AssetViewer
-        {withStacked}
-        asset={$viewingAsset}
-        preloadAssets={$preloadAssets}
-        {isShared}
-        {album}
-        {person}
-        preAction={handlePreAction}
-        onAction={handleAction}
-        onPrevious={handlePrevious}
-        onNext={handleNext}
-        onRandom={handleRandom}
-        onClose={handleClose}
-      />
-    {/await}
-  {/if}
-</Portal>
+{#if $showAssetViewer}
+  <AssetViewer
+    {withStacked}
+    asset={$viewingAsset}
+    preloadAssets={$preloadAssets}
+    {isShared}
+    {album}
+    {person}
+    preAction={handlePreAction}
+    onAction={handleAction}
+    onPrevious={handlePrevious}
+    onNext={handleNext}
+    onRandom={handleRandom}
+    onClose={handleClose}
+  />
+{/if}
 
 <style>
   #asset-grid {
diff --git a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
index 09c126e0df..2c339c6d07 100644
--- a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
+++ b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
@@ -1,28 +1,27 @@
 <script lang="ts">
-  import { type ShortcutOptions, shortcuts } from '$lib/actions/shortcut';
   import { goto } from '$app/navigation';
+  import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
   import type { Action } from '$lib/components/asset-viewer/actions/action';
   import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
   import { AppRoute, AssetAction } from '$lib/constants';
+  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import type { Viewport } from '$lib/stores/assets-store.svelte';
   import { showDeleteModal } from '$lib/stores/preferences.store';
+  import { featureFlags } from '$lib/stores/server-config.store';
+  import { handlePromiseError } from '$lib/utils';
   import { deleteAssets } from '$lib/utils/actions';
   import { archiveAssets, cancelMultiselect } from '$lib/utils/asset-utils';
-  import { featureFlags } from '$lib/stores/server-config.store';
+  import { focusNext } from '$lib/utils/focus-util';
   import { handleError } from '$lib/utils/handle-error';
+  import { getJustifiedLayoutFromAssets, type CommonJustifiedLayout } from '$lib/utils/layout-utils';
   import { navigate } from '$lib/utils/navigation';
   import { type AssetResponseDto } from '@immich/sdk';
+  import { debounce } from 'lodash-es';
   import { t } from 'svelte-i18n';
   import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
-  import ShowShortcuts from '../show-shortcuts.svelte';
-  import Portal from '../portal/portal.svelte';
-  import { handlePromiseError } from '$lib/utils';
   import DeleteAssetDialog from '../../photos-page/delete-asset-dialog.svelte';
-  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { debounce } from 'lodash-es';
-  import { getJustifiedLayoutFromAssets, type CommonJustifiedLayout } from '$lib/utils/layout-utils';
-  import { focusNext } from '$lib/utils/focus-util';
+  import ShowShortcuts from '../show-shortcuts.svelte';
 
   interface Props {
     assets: AssetResponseDto[];
@@ -492,17 +491,15 @@
 
 <!-- Overlay Asset Viewer -->
 {#if $isViewerOpen}
-  <Portal target="body">
-    <AssetViewer
-      asset={$viewingAsset}
-      onAction={handleAction}
-      onPrevious={handlePrevious}
-      onNext={handleNext}
-      onRandom={handleRandom}
-      onClose={() => {
-        assetViewingStore.showAssetViewer(false);
-        handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));
-      }}
-    />
-  </Portal>
+  <AssetViewer
+    asset={$viewingAsset}
+    onAction={handleAction}
+    onPrevious={handlePrevious}
+    onNext={handleNext}
+    onRandom={handleRandom}
+    onClose={() => {
+      assetViewingStore.showAssetViewer(false);
+      handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));
+    }}
+  />
 {/if}
diff --git a/web/src/routes/(user)/+layout.svelte b/web/src/routes/(user)/+layout.svelte
index ea10c45444..2d9b8eee57 100644
--- a/web/src/routes/(user)/+layout.svelte
+++ b/web/src/routes/(user)/+layout.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { run } from 'svelte/legacy';
 
-  import UploadCover from '$lib/components/shared-components/drag-and-drop-upload-overlay.svelte';
   import { page } from '$app/stores';
+  import UploadCover from '$lib/components/shared-components/drag-and-drop-upload-overlay.svelte';
 
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import type { Snippet } from 'svelte';
@@ -26,7 +26,7 @@
   });
 </script>
 
-<div class:display-none={$showAssetViewer}>
+<div>
   {@render children?.()}
 </div>
 <UploadCover />
@@ -35,7 +35,4 @@
   :root {
     overscroll-behavior: none;
   }
-  .display-none {
-    display: none;
-  }
 </style>
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 2e13e5997d..dd4cb0141e 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -1,4 +1,5 @@
 import plugin from 'tailwindcss/plugin';
+import vidstackPlugin from 'vidstack/tailwind.cjs';
 
 /** @type {import('tailwindcss').Config} */
 export default {
@@ -60,6 +61,10 @@ export default {
     },
   },
   plugins: [
+    vidstackPlugin({
+      prefix: 'media',
+      webComponents: true,
+    }),
     plugin(({ matchUtilities, theme }) => {
       matchUtilities(
         {
diff --git a/web/tsconfig.json b/web/tsconfig.json
index c7bc16f52b..898656b6c4 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -11,7 +11,7 @@
     "sourceMap": true,
     "strict": true,
     "target": "es2022",
-    "types": ["vitest/globals"]
+    "types": ["vitest/globals", "vidstack/svelte"]
   },
   "extends": "./.svelte-kit/tsconfig.json"
 }
diff --git a/web/vite.config.js b/web/vite.config.js
index 0ffc0e0eb1..c595b4ebf0 100644
--- a/web/vite.config.js
+++ b/web/vite.config.js
@@ -3,6 +3,7 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { svelteTesting } from '@testing-library/svelte/vite';
 import path from 'node:path';
 import { visualizer } from 'rollup-plugin-visualizer';
+import { vite as vidstack } from 'vidstack/plugins';
 import { defineConfig } from 'vite';
 
 const upstream = {
@@ -35,6 +36,7 @@ export default defineConfig({
     allowedHosts: true,
   },
   plugins: [
+    vidstack(),
     sveltekit(),
     process.env.BUILD_STATS === 'true'
       ? visualizer({