diff --git a/src/components/hero/hero.tsx b/src/components/hero/hero.tsx
index f68307d..e6ee70d 100644
--- a/src/components/hero/hero.tsx
+++ b/src/components/hero/hero.tsx
@@ -30,7 +30,15 @@ const Page: Component<{ entry: Entry }> = (props) => {
       </a>
 
       <img src={props.entry.thumbnail} class={css.thumbnail} />
-      <img src={props.entry.image} class={css.background} />
+      {/* <img src={props.entry.image} class={css.background} /> */}
+
+      <video
+        class={css.background}
+        src={props.entry.trailer}
+        poster={props.entry.image}
+        muted
+        autoplay
+      />
 
       <span class={css.detail}>
         {props.entry.releaseDate}
diff --git a/src/features/content/apis/jellyfin.ts b/src/features/content/apis/jellyfin.ts
index 74a031f..7233b96 100644
--- a/src/features/content/apis/jellyfin.ts
+++ b/src/features/content/apis/jellyfin.ts
@@ -396,6 +396,7 @@ const toEntry = (item: components['schemas']['BaseItemDto']): Entry => {
     image: new URL(`/Items/${item.Id}/Images/Backdrop`, getBaseUrl()),
     providers: {
       jellyfin: item.Id
-    }
+    },
+    trailer: item.RemoteTrailers?.at(-1)?.Url ?? undefined,
   };
 };
\ No newline at end of file