From 993877357dc3c4c4dcac838209e56ca4c6f79959 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?William=20Herg=C3=A8s?= <william@herges.fr>
Date: Sun, 10 Aug 2025 16:05:38 +0200
Subject: perf(video): display thumbnail for mobile

---
 src/component/VideoAuto.astro | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

(limited to 'src/component/VideoAuto.astro')

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>
-- 
cgit v1.2.3