diff --git a/web/src/lib/components/asset-viewer/video-viewer.svelte b/web/src/lib/components/asset-viewer/video-viewer.svelte
index 476c004d4..fbf0221f3 100644
--- a/web/src/lib/components/asset-viewer/video-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/video-viewer.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { api } from '@api';
+  import { ThumbnailFormat, api } from '@api';
   import { fade } from 'svelte/transition';
   import { createEventDispatcher } from 'svelte';
   import { videoViewerVolume } from '$lib/stores/preferences.store';
@@ -18,21 +18,24 @@
       video.muted = true;
       await video.play();
       video.muted = false;
-
-      isVideoLoading = false;
     } catch (error) {
       handleError(error, 'Unable to play video');
+    } finally {
+      isVideoLoading = false;
     }
   };
 </script>
 
 <div transition:fade={{ duration: 150 }} class="flex h-full select-none place-content-center place-items-center">
   <video
+    autoplay
+    playsinline
     controls
     class="h-full object-contain"
     on:canplay={handleCanPlay}
     on:ended={() => dispatch('onVideoEnded')}
     bind:volume={$videoViewerVolume}
+    poster={api.getAssetThumbnailUrl(assetId, ThumbnailFormat.Jpeg)}
   >
     <source src={api.getAssetFileUrl(assetId, false, true, publicSharedKey)} type="video/mp4" />
     <track kind="captions" />