Add video copmenents

src/components/video/poster.astro

@@ -0,0 +1,31 @@
+---
+const {
+    video
+} = Astro.props
+
+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
+}
+---
+<picture>
+
+    { Object.entries( mergedSources ).map( ([ key, source ]) => (
+        <source
+            sizes={ source.sizes }
+            data-srcset={ source.srcset }
+            type={ `image/${ key }` }
+        >
+    ) ) }
+
+    <img
+        data-src={ video.thumbnail.src }
+        alt={ video.name }
+        class="absolute inset-0 h-full w-full object-cover lazyload"
+    >
+</picture>