Use poster component for cards

components-eleventy/video/card.js

@@ -1,3 +1,4 @@
+import renderPoster from './poster.js'
 
 function pill ( text ) {
     return /* html */`
@@ -20,6 +21,8 @@ export default async function ( video, options = {} ) {
 
     // console.log('video', video)
 
+    const posterHtml = renderPoster( video )
+
     return /* html */`
 <div class="video-card ${ classes }" style="max-width: ${ width }; flex-basis: ${ width }; scroll-snap-align: start;">
     <a
@@ -29,18 +32,7 @@ export default async function ( video, options = {} ) {
         <div class="video-card-container relative overflow-hidden bg-black">
             <div class="video-card-image ratio-wrapper">
                 <div class="relative overflow-hidden w-full pb-16/9">
-                    <picture>
+                    ${ posterHtml }
-                        <source
-                            sizes="${video.thumbnail.sizes}"
-                            data-srcset="${video.thumbnail.srcset}"
-                            type="image/jpg"
-                        >
-                        <img
-                            data-src="${video.thumbnail.src}"
-                            alt="${video.name}"
-                            class="lazyload absolute h-full w-full object-cover"
-                        >
-                    </picture>
                 </div>
             </div>
             <div

components-eleventy/video/player.js

@@ -1,33 +1,4 @@
-function renderPoster ( video ) {
+import renderPoster from './poster.js'
-    const webpSource = {
-        ...video.thumbnail,
-        srcset: video.thumbnail.srcset.replaceAll('ytimg.com/vi/', 'ytimg.com/vi_webp/').replace(/.png|.jpg|.jpeg/g, '.webp')
-    }
-
-    const mergedSources = {
-        webp: webpSource,
-        jpeg: video.thumbnail
-    }
-
-    return /* html */`
-<picture>
-
-    ${ Object.entries( mergedSources ).map( ([ key, source ]) => (/* html */`
-        <source
-            sizes="${ source.sizes }"
-            data-srcset="${ source.srcset }"
-            type="image/${ key }"
-        >
-    `) ).join('') }
-
-    <img
-        :data-src="${ video.thumbnail.src }"
-        alt="${ video.name }"
-        class="absolute inset-0  h-full w-full object-cover lazyload"
-    >
-</picture>
-    `
-}
 
 function renderTimestamps ( video ) {
     const timestampsForRender = video.timestamps.map( timestamp => {

components-eleventy/video/poster.js

@@ -0,0 +1,32 @@
+
+
+export default function ( video ) {
+    const webpSource = {
+        ...video.thumbnail,
+        srcset: video.thumbnail.srcset.replaceAll('ytimg.com/vi/', 'ytimg.com/vi_webp/').replace(/.png|.jpg|.jpeg/g, '.webp')
+    }
+
+    const mergedSources = {
+        webp: webpSource,
+        jpeg: video.thumbnail
+    }
+
+    return /* html */`
+<picture>
+
+    ${ Object.entries( mergedSources ).map( ([ key, source ]) => (/* html */`
+        <source
+            sizes="${ source.sizes }"
+            data-srcset="${ source.srcset }"
+            type="image/${ key }"
+        >
+    `) ).join('') }
+
+    <img
+        :data-src="${ video.thumbnail.src }"
+        alt="${ video.name }"
+        class="absolute inset-0  h-full w-full object-cover lazyload"
+    >
+</picture>
+    `
+}