diff --git a/packages/devtools/client/components/AssetDetails.vue b/packages/devtools/client/components/AssetDetails.vue
index aca1a7b4d..b7563fe76 100644
--- a/packages/devtools/client/components/AssetDetails.vue
+++ b/packages/devtools/client/components/AssetDetails.vue
@@ -98,6 +98,7 @@ const supportsPreview = computed(() => {
 
       <div flex="~" items-center justify-center>
         <AssetPreview
+          detail
           max-h-80 min-h-20 min-w-20 w-auto rounded border="~ base"
           :asset="asset"
           :text-content="textContent"
diff --git a/packages/devtools/client/components/AssetPreview.vue b/packages/devtools/client/components/AssetPreview.vue
index 8dc0b6070..03808715a 100644
--- a/packages/devtools/client/components/AssetPreview.vue
+++ b/packages/devtools/client/components/AssetPreview.vue
@@ -4,6 +4,7 @@ import type { AssetInfo } from '~/../src/types'
 defineProps<{
   asset: AssetInfo
   textContent?: string
+  detail?: boolean
 }>()
 </script>
 
@@ -21,6 +22,9 @@ defineProps<{
     <div v-else-if="asset.type === 'text' && textContent" w-full self-start p4>
       <pre max-h-10rem of-hidden text-xs font-mono v-text="textContent" />
     </div>
+    <div v-else-if="asset.type === 'video'">
+      <video :src="asset.publicPath" :autoplay="detail" :controls="detail" />
+    </div>
     <div v-else i-carbon-help text-3xl op20 />
   </div>
 </template>