started on attempting to implement trailers for the hero element

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}

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,
   };
 };