Différences

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

--- js:wrap_lazy-videos [2026/07/13 10:16] – avillepreux
+++ js:wrap_lazy-videos [2026/07/27 10:10] (Version actuelle) – avillepreux
@@ Ligne 18: / Ligne 18: @@
                   	video {
-                  		z-index: 1;
+                  		position: relative;
                         	transition: opacity 1s;
                         	&.lazy-waiting { opacity: 0 }
                         	opacity: 1;
+                        	&:hover {
+                        		cursor: pointer;
+                        	}
                 	}
                 }
@@ Ligne 27: / Ligne 31: @@
 }
-.wrap_lazy-video {
+.wrap_lazy-video:has(.lazy-waiting) {
   background-image:
     radial-gradient(
@@ Ligne 50: / Ligne 54: @@
   position: relative;
   overflow:hidden;
-}
-.wrap_lazy-video:before {
+  &:before {
-  content: '';
+    content: '';
-  position: absolute;
+    position: absolute;
-  display: block;
+    display: block;
-  background-image:
+    background-image:
-    linear-gradient(to left,
+      linear-gradient(to left,
-      hsl(240, 100%, 38%) 14.29%,
+        hsl(240, 100%, 38%) 14.29%,
-      hsl(  0,   0%,  0%) 14.29%,
+        hsl(  0,   0%,  0%) 14.29%,
-      hsl(  0,   0%,  0%) 28.57%,
+        hsl(  0,   0%,  0%) 28.57%,
-      hsl(320,  93%, 27%) 28.57%,
+        hsl(320,  93%, 27%) 28.57%,
-      hsl(320,  93%, 27%) 42.86%,
+        hsl(320,  93%, 27%) 42.86%,
-      hsl(  0,   0%,  0%) 42.86%,
+        hsl(  0,   0%,  0%) 42.86%,
-      hsl(  0,   0%,  0%) 57.14%,
+        hsl(  0,   0%,  0%) 57.14%,
-      hsl(184, 100%, 50%) 57.14%,
+        hsl(184, 100%, 50%) 57.14%,
-      hsl(184, 100%, 50%) 71.43%,
+        hsl(184, 100%, 50%) 71.43%,
-      hsl(  0,   0%,  0%) 71.43%,
+        hsl(  0,   0%,  0%) 71.43%,
-      hsl(  0,   0%,  0%) 85.71%,
+        hsl(  0,   0%,  0%) 85.71%,
-      hsl(  0,  0%, 82%) 85.71%);
+        hsl(  0,  0%, 82%) 85.71%);
-  height: 5%;
+    height: 5%;
-  width: 100%;
+    width: 100%;
-  bottom: 25%;
+    bottom: 25%;
+  }
 }
@@ Ligne 79: / 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 136: / Ligne 143: @@
     video.load();
-    if (video.autoplay) {
+    if (video.autoplay && !no_autoplay) {
       video.play().catch(() => {});
     }