fix: lancement vidéo YouTube via IFrame Player API

- Remplacement iframe par div#youtube-player avec data-video-id
- ID vidéo extrait du videoUrl via regex côté PHP
- Chargement de l'API YouTube IFrame au load
- Création du player + playVideo() dans onReady au clic

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

assets/js/hero-video.js

@@ -1,38 +1,49 @@
 
 export function playVideo() {
   const playButton = document.querySelector('#hero-play-video');
+  if (!playButton) return;
 
-  if (!playButton) {
+  const playerDiv = document.querySelector('#youtube-player');
-    return;
+  if (!playerDiv) return;
-  }
 
-  playButton.addEventListener('click', function() {
+  // Charger l'API YouTube IFrame Player
+  const tag = document.createElement('script');
+  tag.src = 'https://www.youtube.com/iframe_api';
+  document.head.appendChild(tag);
+
+  let ytReady = false;
+  window.onYouTubeIframeAPIReady = () => { ytReady = true; };
+
+  playButton.addEventListener('click', function () {
     const extract = document.querySelector('.extract');
     const videoFull = document.querySelector('.video-full');
     const titleSmall = document.querySelector('.page-title-small');
 
-
+    if (extract) extract.style.display = 'none';
-    if (extract) {
+    if (titleSmall) titleSmall.style.display = 'none';
-      extract.style.display = 'none';
-    }
-
-    if(titleSmall){
-      titleSmall.style.display = 'none';
-    }
 
     if (videoFull) {
       videoFull.style.display = 'block';
 
-      const iframe = videoFull.querySelector('iframe');
+      function createPlayer() {
-      if (iframe) {
+        new YT.Player('youtube-player', {
-        const src = iframe.src;
+          videoId: playerDiv.dataset.videoId,
-
+          width: '100%',
-        // Ajouter les paramètres autoplay et mute pour YouTube
+          height: '100%',
-        if (src) {
+          playerVars: {
-          const separator = src.includes('?') ? '&' : '?';
+            autoplay: 1,
-          iframe.src = src + separator + 'autoplay=1&mute=1';
+            rel: 0,
-          iframe.setAttribute('allow', 'autoplay; encrypted-media');
+          },
+          events: {
+            onReady: (e) => e.target.playVideo(),
+          },
+        });
       }
+
+      if (ytReady) {
+        createPlayer();
+      } else {
+        window.onYouTubeIframeAPIReady = createPlayer;
       }
     }
   });

site/templates/investigation.php

@@ -32,9 +32,12 @@ $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
             <button id="hero-play-video"><span class="btn--bold"><?= svg('assets/icons/play.svg') ?> <span class="text">play video</span></button>
         </div>
         <?php endif ?>
-        <?php if ($page->videoUrl()->isNotEmpty()): ?>
+        <?php if ($page->videoUrl()->isNotEmpty()):
+            preg_match('/(?:embed\/|v=|youtu\.be\/)([a-zA-Z0-9_-]+)/', $page->videoUrl()->value(), $m);
+            $videoId = $m[1] ?? '';
+        ?>
         <div class="video-full">
-            <iframe 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="<?= $page->title()->esc() ?>" width="480" height="320" src="<?= $page->videoUrl() ?>"></iframe>
+            <div id="youtube-player" data-video-id="<?= $videoId ?>"></div>
         </div>
         <?php endif ?>
     </div>