From 0ebcdfb70501cefe7479ac7c83df2a86ebfa3a33 Mon Sep 17 00:00:00 2001
From: zenfyr <git@zenfyr.dev>
Date: Mon, 8 Jun 2026 01:50:29 +0700
Subject: [PATCH] hide the lazy video when js is off, slap the loading prop.

---
 astro.config.mjs           | 4 +++-
 src/layouts/BasePage.astro | 1 +
 src/layouts/base.css       | 7 +++++--
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index e69021b..391d5ec 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -49,8 +49,9 @@ export function rehypeAutoVideo() {
           type: "element",
           tagName: "video",
           properties: {
-            className: ["lazy-video", "inline-video"],
+            className: ["inline-video", "lazy-video"],
             alt: alt,
+            loading: "lazy",
             loop: true,
             muted: true,
             playsInline: true,
@@ -75,6 +76,7 @@ export function rehypeAutoVideo() {
               properties: {
                 className: ["inline-video"],
                 alt: alt,
+                loading: "lazy",
                 loop: true,
                 muted: true,
                 playsInline: true,
diff --git a/src/layouts/BasePage.astro b/src/layouts/BasePage.astro
index 0974529..3ff0224 100644
--- a/src/layouts/BasePage.astro
+++ b/src/layouts/BasePage.astro
@@ -36,6 +36,7 @@ const lang = normalizeLangTag(locale);
         { rootMargin: "50px" },
       );
 
+      video.className = video.className.replace("lazy-video", "")
       observer.observe(video);
     });
   </script>
diff --git a/src/layouts/base.css b/src/layouts/base.css
index 64229b9..0f1cb67 100644
--- a/src/layouts/base.css
+++ b/src/layouts/base.css
@@ -17,8 +17,11 @@ body {
 
 .inline-video {
   display: block;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
   max-width: 100%;
   width: 520px;
 }
+
+.lazy-video {
+    display: none;
+}
-- 
2.51.2