Use poster component for cards

components-eleventy/video/player.js

@@ -1,33 +1,4 @@
-function renderPoster ( 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>
-    `
-}
+import renderPoster from './poster.js'
 
 function renderTimestamps ( video ) {
     const timestampsForRender = video.timestamps.map( timestamp => {