diff options
| -rw-r--r-- | public/batteur/balance.webp | bin | 0 -> 23330 bytes | |||
| -rw-r--r-- | public/batteur/bb.webp | bin | 0 -> 285186 bytes | |||
| -rw-r--r-- | public/batteur/solo.webp | bin | 0 -> 178574 bytes | |||
| -rw-r--r-- | src/component/VideoAuto.astro | 17 | ||||
| -rw-r--r-- | src/pages/index.astro | 6 |
5 files changed, 15 insertions, 8 deletions
diff --git a/public/batteur/balance.webp b/public/batteur/balance.webp Binary files differnew file mode 100644 index 0000000..9779a29 --- /dev/null +++ b/public/batteur/balance.webp diff --git a/public/batteur/bb.webp b/public/batteur/bb.webp Binary files differnew file mode 100644 index 0000000..b4854e2 --- /dev/null +++ b/public/batteur/bb.webp diff --git a/public/batteur/solo.webp b/public/batteur/solo.webp Binary files differnew file mode 100644 index 0000000..8064b80 --- /dev/null +++ b/public/batteur/solo.webp 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"> |
