Différences

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

--- js:wrap_lazy-videos [2026/07/13 10:08] – avillepreux
+++ js:wrap_lazy-videos [2026/07/27 10:10] (Version actuelle) – avillepreux
@@ Ligne 9: / Ligne 9: @@
 	.wrap_lazy-video {
-		inline-size: fit-content;
+		opacity: 0;
-		outline:     1px solid color-mix(in srgb, currentColor 33%, transparent);
+		&:has(video) {
-		video {
-			transition: opacity 1s;
-			&.lazy-waiting { opacity: 0 }
 			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;
+                        	&:hover {
+                        		cursor: pointer;
+                        	}
+                	}
+                }
 	}
+}
+.wrap_lazy-video:has(.lazy-waiting) {
+  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;
+  &: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%;
+  }
 }
@@ Ligne 25: / Ligne 84: @@
 document.addEventListener("DOMContentLoaded", () => {
+  var no_autoplay = (document.querySelectorAll(".wrap_lazy-videos-no-autoplay" ).length > 0);
   document.querySelectorAll(".wrap_lazy-videos .wrap_lazy-video").forEach(function(wrap_video) {
-          var video_path	= wrap_video.textContent;
+          var video_path	= wrap_video.textContent.trim();
-          var dokuwiki_path	= video_path;
+          var dokuwiki_path	= video_path.replaceAll("/", ":").replaceAll("\\", ":");
-          var src_path		= ("/_media/" + video_path).replaceAll(":", "/");
+          var src_path		= ("/_media/" + video_path).replaceAll(":", "/").replaceAll("\\", "/");
           var basename 		= src_path.split('/').reverse()[0];
-          var html = 	'<video title="' + basename + '" class="lazy-waiting media" width="320" height="240" controls="controls" muted autoplay loop playsinline preload="auto">' +
+          var html = 	'<video title="' + basename + '" class="lazy-waiting media" width="320" height="240" controls="controls" muted' + (!!no_autoplay ? '' : ' autoplay') + ' loop playsinline preload="auto">' +
                                   '<source data-src="' + src_path + '" type="video/mp4">' +
                                   '<a href="' + src_path + '?cache=" class="media mediafile mf_mp4" title="' + dokuwiki_path + '">' + basename + '</a>' +
@@ Ligne 82: / Ligne 143: @@
     video.load();
-    if (video.autoplay) {
+    if (video.autoplay && !no_autoplay) {
       video.play().catch(() => {});
     }