diff --git a/packages/client/components/AssetDetails.vue b/packages/client/components/AssetDetails.vue
index 8a9bb1e4..379bd73a 100644
--- a/packages/client/components/AssetDetails.vue
+++ b/packages/client/components/AssetDetails.vue
@@ -70,7 +70,8 @@ const client = useDevToolsClient()
 
       <div flex="~" items-center justify-center>
         <AssetPreview
-          max-h-80 min-h-20 min-w-20 w-auto rounded border="~ base"
+          border="~ base"
+          detail max-h-80 min-h-20 min-w-20 w-auto rounded
           :asset="asset"
           :text-content="textContent"
         />
diff --git a/packages/client/components/AssetPreview.vue b/packages/client/components/AssetPreview.vue
index 160d1eb1..85f8ef9c 100644
--- a/packages/client/components/AssetPreview.vue
+++ b/packages/client/components/AssetPreview.vue
@@ -2,6 +2,7 @@
 defineProps<{
   asset: AssetInfo
   textContent?: string
+  detail?: boolean
 }>()
 </script>
 
@@ -19,6 +20,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>