perf(video): display thumbnail for mobile

1 files changed, 12 insertions, 5 deletions

diff --git a/src/component/VideoAuto.astro b/src/component/VideoAuto.astro
index ddfe1c8..8746b68 100644
--- a/src/component/VideoAuto.astro
+++ b/src/component/VideoAuto.astro
@@ -1,16 +1,23 @@
 ---
-const { src } = Astro.props;
+const { src, thumb } = Astro.props;
 ---
 
-<video muted loop>
-  <source src={src} />
-</video>
+<img src={thumb} data-video={src} alt="Video thumbnail" />
 
 <script>
   window.addEventListener("load", () => {
-    document.querySelectorAll("video").forEach((video) => {
+    document.querySelectorAll("img[data-video]").forEach((img) => {
       if (window.screen.width < 1000) return;
+      const video = document.createElement("video");
+      video.muted = true;
+      video.defaultMuted = true;
+      video.loop = true;
       video.autoplay = true;
+      const source = document.createElement("source");
+      source.src = img.getAttribute("data-video");
+      video.appendChild(source);
+      img.parentNode.insertBefore(video, img);
+      img.parentNode.removeChild(img);
     });
   });
 </script>