1s

git clone git://bebou.netlib.re/1s

Log | Files | Refs | README |

commit 62685c0ede132b9acc8fe00f6da3ee71e09a7fe4
parent 142b1b868a573e1e8f5ce980b881d84b1830a316
Auteurice: Arthur Pons <arthur.pons@unistra.fr>
Date:   Tue, 13 May 2025 08:42:15 +0200

Ajout des posters lazyloadés

Merci Timothée !!

Diffstat:
M
gendays
 | 
9
++++++---
M
genm
 | 
9
++++++---
M
geny
 | 
18
++++++++++++++----
M
style.css
 | 
13
+++++++++++++

4 files changed, 39 insertions(+), 10 deletions(-)
diff --git a/gendays b/gendays
@@ -20,9 +20,12 @@
 		<p>Mois : <a href="/$1/$2">$2</a></p>
 	</nav>
 	<main>
-		<video controls loop preload="metadata">
-			<source src="$6">
-		</video>
+		<figure class="video">
+			<video controls preload="none" width="320" height="180">
+				<source src="$6">
+			</video>
+			<img class="poster" src="/320x180.svg" loading="lazy" width="320" height="180">
+		</figure>
 	</main>
 </body>
 </html>
diff --git a/genm b/genm
@@ -33,9 +33,12 @@
 
 < cal grep "$1/$2" | awk '{print $6,$1,$5,$8,$3,$7}' | xargs printf '
 <p><a href=%s>%s %s %s %s</a></p>
-<video controls loop preload="metadata">
-	<source src="%s">
-</video>
+		<figure class="video">
+			<video controls preload="none" width="320" height="180">
+				<source src="%s">
+			</video>
+			<img class="poster" src="/320x180.svg" loading="lazy" width="320" height="180">
+		</figure>
 '
 
 <<@@ cat
diff --git a/geny b/geny
@@ -35,16 +35,26 @@
 	<main>
 	<hr>
 	<p>Vidéo de l'année</p>
-	<video controls loop preload="metadata">
+
+<figure class="video">
+	<video controls preload="none" width="320" height="180">
 		<source src="/$1/$1-montage.mp4">
 	</video>
+	<img class="poster" src="/320x180.svg" loading="lazy" width="320" height="180">
+</figure>
+
 	<hr>
 @@
 < cal grep "$1" | awk '{print $6,$1,$5,$8,$3,$7}' | xargs printf '
 <p><a href=%s>%s %s %s %s</a></p>
-<video controls loop preload="metadata">
-	<source src="%s">
-</video>
+
+<figure class="video">
+	<video controls preload="none" width="320" height="180">
+		<source src="%s">
+	</video>
+	<img class="poster" src="/320x180.svg" loading="lazy" width="320" height="180">
+</figure>
+
 '
 <<@@ cat
 	</main>
diff --git a/style.css b/style.css
@@ -511,3 +511,16 @@ sub {
     color: var(--text) !important;
   }
 }
+
+.video {
+	padding: 0;
+	margin: 0 0 1rem 0;
+	display: flex;
+	position: relative;
+	width: fit-content;
+}
+.poster {
+	position: absolute;
+	inset: 0;
+	z-index: -1;
+}