hero video

assets/css/style.css

@@ -1471,7 +1471,7 @@ body main {
 }
 [data-template=investigation-summary] main #hero figure img {
   width: 100%;
-  aspect-ratio: 16/9;
+  aspect-ratio: 2/1;
   -o-object-fit: cover;
      object-fit: cover;
 }
@@ -1482,7 +1482,7 @@ body main {
   --swiper-navigation-sides-offset: 32px;
   --swiper-navigation-size: 32px;
   opacity: 0.8;
-  top: calc(28.125vw - var(--swiper-navigation-size) * 0.5);
+  top: calc(450vw - var(--swiper-navigation-size) * 0.5);
   margin-top: 0;
 }
 @media screen and (max-width: 560px) {
@@ -1510,6 +1510,60 @@ body main {
   background: var(--color-txt);
   opacity: 0.8;
 }
+[data-template=investigation-summary] main #hero .player-container {
+  width: 100%;
+  position: relative;
+  aspect-ratio: 2/1;
+}
+[data-template=investigation-summary] main #hero .player-container .extract, [data-template=investigation-summary] main #hero .player-container video {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  position: relative;
+}
+[data-template=investigation-summary] main #hero .player-container .video-full {
+  width: 100%;
+  height: 100%;
+  display: none;
+}
+[data-template=investigation-summary] main #hero .player-container .video-full iframe {
+  width: 100%;
+  height: 100%;
+}
+[data-template=investigation-summary] main #hero .player-container #hero-play-video {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+[data-template=investigation-summary] main #hero .player-container #hero-play-video .btn--bold {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1ch;
+  padding: 0 1ch;
+  opacity: 0.8;
+}
+[data-template=investigation-summary] main #hero .player-container #hero-play-video .btn--bold:hover {
+  opacity: 1;
+}
+[data-template=investigation-summary] main #hero .player-container #hero-play-video .text {
+  color: black;
+  line-height: 1;
+  padding-top: 4px;
+}
+[data-template=investigation-summary] main #hero .player-container #hero-play-video svg {
+  width: 18px;
+  height: 18px;
+  fill: black;
+  opacity: 0.8;
+}
 [data-template=investigation-summary] main #nav--page ul {
   list-style: none;
 }
@@ -1650,6 +1704,7 @@ body main {
     margin-bottom: calc((100dvh - var(--header-h)) * -1);
     padding: var(--padding-body);
     padding-left: 0px;
+    padding-bottom: calc(var(--padding-body) * 2);
     position: sticky;
     top: var(--header-h);
     width: var(--banner-medium);
@@ -1693,7 +1748,7 @@ body main {
   }
   .modal--share {
     position: absolute;
-    bottom: calc(var(--padding-body) + var(--h-block) + var(--spacing) * 0.25);
+    bottom: calc(var(--padding-body) * 2 + var(--h-block) + var(--spacing) * 0.25);
     width: calc(100% - var(--padding-body));
   }
 }

assets/css/template/_investigation-summary.scss

@@ -49,7 +49,7 @@
             position: relative;
             img{
                 width: 100%;
-                aspect-ratio: 16/9;
+                aspect-ratio: 2/1;
                 object-fit: cover;
             }
         }
@@ -71,7 +71,7 @@
             // Position buttons relative to the image (16/9 aspect ratio)
             // Calculate: 50% of image height = 50% * (9/16) of width
             // Image is 100vw wide, so center at: (100vw * 9/16) / 2
-            top: calc(100vw * 9 / 16 / 2 - var(--swiper-navigation-size)*0.5);
+            top: calc(100vw * 9 / 2 - var(--swiper-navigation-size)*0.5);
             margin-top: 0;
 
             svg{ color: white; }
@@ -98,6 +98,72 @@
         }
 
 
+        .player-container{
+            width: 100%;
+            position: relative;
+            aspect-ratio: 2/1;
+      
+            .extract, video{
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+                position: relative;
+            }
+
+
+       
+            .video-full{ 
+                width: 100%;
+                height: 100%;
+                iframe{
+                    width: 100%;
+                    height: 100%;
+                }
+                display: none; 
+            }
+
+            #hero-play-video{
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                top: 0;
+                left: 0;
+                text-transform: uppercase;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+              
+
+                .btn--bold{
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    gap: 1ch;
+                    padding: 0 1ch;
+                    opacity: 0.8;
+                    &:hover{
+                        opacity: 1;
+                    }
+                }
+
+                .text{
+                    color: black;
+                    line-height: 1;
+                    padding-top: 4px;
+                }
+
+                svg{
+                    width: 18px;
+                    height: 18px;
+                    fill: black;
+                    opacity: 0.8;
+                    // opacity: 0.7;
+                }
+            }
+        
+        }
+
+
     }
 
     #nav--page{
@@ -308,6 +374,7 @@
             margin-bottom: calc((100dvh - var(--header-h))*-1);
             padding: var(--padding-body);
             padding-left: 0px;
+            padding-bottom: calc(var(--padding-body)*2);
             position: sticky;
             top: var(--header-h);
             width: var(--banner-medium);
@@ -364,7 +431,7 @@
     }
     .modal--share{
         position: absolute;
-        bottom: calc(var(--padding-body) + var(--h-block) + var(--spacing) * 0.25);
+        bottom: calc(var(--padding-body)*2 + var(--h-block) + var(--spacing) * 0.25);
         width: calc(100% - var(--padding-body));
     }
 }  

assets/icons/play.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3 17v-10l9 5.146-9 4.854z"/></svg>

assets/js/hero-video.js

@@ -0,0 +1,33 @@
+
+export function playVideo() {
+  const playButton = document.querySelector('#hero-play-video');
+
+  if (!playButton) {
+    return;
+  }
+
+  playButton.addEventListener('click', function() {
+    const extract = document.querySelector('.extract');
+    const videoFull = document.querySelector('.video-full');
+
+    if (extract) {
+      extract.style.display = 'none';
+    }
+
+    if (videoFull) {
+      videoFull.style.display = 'block';
+
+      const iframe = videoFull.querySelector('iframe');
+      if (iframe) {
+        const src = iframe.src;
+
+        // Ajouter les paramètres autoplay et mute pour YouTube
+        if (src) {
+          const separator = src.includes('?') ? '&' : '?';
+          iframe.src = src + separator + 'autoplay=1&mute=1';
+          iframe.setAttribute('allow', 'autoplay; encrypted-media');
+        }
+      }
+    }
+  });
+}

assets/js/script.js

@@ -4,6 +4,7 @@ import { bannerStickyMobile } from './banner-sticky-mobile.js';
 import { bannerStickyDesktop } from './banner-sticky-desktop.js';
 import { themeToggle } from './themeToggle.js';
 import { initHeroSlider } from './hero-slider.js';
+import { playVideo } from './hero-video.js';
 
 const responsiveMedium = 1080;
 const responsiveSmall = 768;
@@ -17,4 +18,5 @@ window.onload = async function () {
   bannerStickyMobile(responsiveSmall);
   bannerStickyDesktop(responsiveSmall);
   initHeroSlider();
+  playVideo();
 }

site/templates/investigation-summary.php

@@ -7,14 +7,20 @@
             <p class="date-publish"></p>
         </header>
 
-            <!-- <div id="hero" class="hero-video">
+
+
+           <!-- HERO IMAGE SIMPLE ------------------------------ -->
+            <!-- <div id="hero">
                 <figure>
                     <img src="/assets/images/Nidal-Khaled-Amirah.png">
                 </figure>
                 <figcaption>Ici la légende de l’image. À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</figcaption>
             </div> -->
 
-            <div id="hero" class="hero-slider swiper">
+
+
+            <!-- HERO SLIDER ------------------------------ -->
+            <!-- <div id="hero" class="hero-slider swiper">
                 <div class="swiper-wrapper">
                     <div class="swiper-slide">
                         <figure>
@@ -38,13 +44,36 @@
                     </div>
                 </div>
 
-                <!-- Navigation buttons -->
                 <div class="swiper-button-prev"></div>
                 <div class="swiper-button-next"></div>
 
-                <!-- Pagination -->
                 <div class="swiper-pagination"></div>
+            </div> -->
+
+
+             <!-- HERO VIDEO ------------------------------ -->
+            <div id="hero" class="hero-video">
+
+            <div class="player-container">
+
+                <div class="extract">
+                    <video class="vjs-tech" id="player-element_html5_api" tabindex="-1" loop="" muted="muted" playsinline="playsinline" autoplay="" src="https://www.index.ngo/wp-content/uploads/2025/07/Jumaa_Site-web-16-9.mp4"></video>
+                    <button id="hero-play-video"><span class="btn--bold"><?= svg('assets/icons/play.svg') ?> <span class="text">play video</span></button>
+                </div>
+                <div class="video-full">
+                    <iframe id="youtube-vue-player-rhTyqvaQE" rel="0" frameborder="0" allowfullscreen="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" title="Mort par noyade de Jumaa al-Hasan, exilé syrien : la police mise en cause" width="480" height="320" src="https://www.youtube.com/embed/HuH8NEwn0-k?autoplay=false&amp;loop=1&amp;controls=1&amp;modestbranding=1&amp;enablejsapi=1&amp;origin=https%3A%2F%2Fwww.index.ngo&amp;widgetid=1&amp;forigin=https%3A%2F%2Fwww.index.ngo%2Fenquetes%2Fmort-par-noyade-de-jumaa-al-hasan-la-police-mise-en-cause%2F&amp;aoriginsup=0&amp;gporigin=https%3A%2F%2Fwww.index.ngo%2F&amp;vf=1"></iframe>
+                </div>
             </div>
+            
+                    <!-- <figure>
+                        <img src="/assets/images/Nidal-Khaled-Amirah.png">
+                    </figure> -->
+            </div>
+
+
+
+
+
 
             <div id="banner--page">
                 <nav id="nav--page">