Différences

Ci-dessous, les différences entre deux révisions de la page.

--- js:wrap_lazy-videos [2026/07/13 09:59] – avillepreux
+++ js:wrap_lazy-videos [2026/07/13 10:24] (Version actuelle) – avillepreux
@@ Ligne 9: / Ligne 9: @@
 	.wrap_lazy-video {
-		inline-size: fit-content;
+		opacity: 0;
-		animation: opacity 1s;
+		&:has(video) {
-		&.lazy-waiting { opacity: 0 }
-		opacity: 1;
+			opacity: 1;
+                  	inline-size: fit-content;
+                  	outline:     1px solid color-mix(in srgb, currentColor 33%, transparent);
+                  	video {
+                  		position: relative;
+                        	transition: opacity 1s;
+                        	&.lazy-waiting { opacity: 0 }
+                        	opacity: 1;
+                	}
+                }
 	}
+}
+.wrap_lazy-video {
+  background-image:
+    radial-gradient(
+      transparent,
+      hsla(0, 0%, 0%, 0.85)),
+    linear-gradient(
+      transparent    75%,
+      hsl(0, 0%, 0%) 75%),
+    linear-gradient(to left,
+      hsl(  0,   0%, 82%) 14.29%,
+      hsl( 54, 100%, 50%) 14.29%,
+      hsl( 54, 100%, 50%) 28.57%,
+      hsl(184, 100%, 50%) 28.57%,
+      hsl(184, 100%, 50%) 42.86%,
+      hsl(121,  98%, 42%) 42.86%,
+      hsl(121,  98%, 42%) 57.14%,
+      hsl(320,  93%, 37%) 57.14%,
+      hsl(320,  93%, 37%) 71.43%,
+      hsl(349, 100%, 50%) 71.43%,
+      hsl(349, 100%, 50%) 85.71%,
+      hsl(240, 100%, 38%) 85.71%);
+  position: relative;
+  overflow:hidden;
+}
+.wrap_lazy-video:before {
+  content: '';
+  position: absolute;
+  display: block;
+  background-image:
+    linear-gradient(to left,
+      hsl(240, 100%, 38%) 14.29%,
+      hsl(  0,   0%,  0%) 14.29%,
+      hsl(  0,   0%,  0%) 28.57%,
+      hsl(320,  93%, 27%) 28.57%,
+      hsl(320,  93%, 27%) 42.86%,
+      hsl(  0,   0%,  0%) 42.86%,
+      hsl(  0,   0%,  0%) 57.14%,
+      hsl(184, 100%, 50%) 57.14%,
+      hsl(184, 100%, 50%) 71.43%,
+      hsl(  0,   0%,  0%) 71.43%,
+      hsl(  0,   0%,  0%) 85.71%,
+      hsl(  0,  0%, 82%) 85.71%);
+  height: 5%;
+  width: 100%;
+  bottom: 25%;
 }