js:wrap_lazy-videos

Différences

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

Lien vers cette vue comparative

Prochaine révision		 Révision précédente
js:wrap_lazy-videos [2026/06/16 09:12] – créée avillepreuxjs:wrap_lazy-videos [2026/07/13 10:24] (Version actuelle) – avillepreux
Ligne 9: Ligne 9:
  .wrap_lazy-video {  .wrap_lazy-video {
  
- inline-size: fit-content;+ opacity: 0; 
 + 
 + &:has(video) { 
 + 
 + 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%;
 } }
  
Ligne 26: Ligne 87:
           var basename = src_path.split('/').reverse()[0];           var basename = src_path.split('/').reverse()[0];
  
-          var html = '<video title="' + basename + '" class="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 autoplay loop playsinline preload="auto">' +
                                   '<source data-src="' + src_path + '" type="video/mp4">' +                                   '<source data-src="' + src_path + '" type="video/mp4">' +
                                   '<a href="' + src_path + '?cache=" class="media mediafile mf_mp4" title="' + dokuwiki_path + '">' + basename + '</a>' +                                    '<a href="' + src_path + '?cache=" class="media mediafile mf_mp4" title="' + dokuwiki_path + '">' + basename + '</a>' + 
Ligne 80: Ligne 141:
  
     state.set(video, "loaded");     state.set(video, "loaded");
 +    video.classList.remove("lazy-waiting");
   };   };
  
Ligne 99: Ligne 161:
  
     state.set(video, "unloaded");     state.set(video, "unloaded");
 +    video.classList.add("lazy-waiting");
   };   };
  
  • js/wrap_lazy-videos.1781593955.txt.gz
  • Dernière modification : 2026/06/16 09:12
  • de avillepreux