Use poster component for cards

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>
+    `
+}