hero video

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();
 }