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 ++++++++++++-----
 src/pages/index.astro         |  6 +++---
 2 files changed, 15 insertions(+), 8 deletions(-)

(limited to 'src')

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>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 3f793b6..4e8ac17 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -24,16 +24,16 @@ import Base from "../layout/Base.astro";
       <MosaicBackground height="400">
         <img src="/batteur/old2.webp" />
         <img src="/batteur/old3.webp" />
-        <VideoAuto src="/batteur/video/bb.webm" />
+        <VideoAuto src="/batteur/video/bb.webm" thumb="/batteur/bb.webp" />
         <img src="/batteur/dark_scene.webp" />
-        <VideoAuto src="/batteur/video/balance.webm" />
+        <VideoAuto src="/batteur/video/balance.webm" thumb="/batteur/balance.webp" />
         <img src="/batteur/black_and_white.webp" />
         <img src="/batteur/old.webp" />
         <img src="/batteur/mid_rock.webp" />
         <img src="/batteur/mid_outdoor.webp" />
         <img src="/batteur/mid_rock2.webp" />
         <img src="/batteur/recent.webp" />
-        <VideoAuto src="/batteur/video/solo.webm" />
+        <VideoAuto src="/batteur/video/solo.webm" thumb="/batteur/solo.webp" />
       </MosaicBackground>
       <div class="content">
         <div class="content__header">
-- 
cgit v1.2.3