diff --git a/assets/js/hero-video.js b/assets/js/hero-video.js index 707c316..2ab524c 100644 --- a/assets/js/hero-video.js +++ b/assets/js/hero-video.js @@ -1,38 +1,49 @@ export function playVideo() { const playButton = document.querySelector('#hero-play-video'); + if (!playButton) return; - if (!playButton) { - return; - } + const playerDiv = document.querySelector('#youtube-player'); + 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(titleSmall){ - titleSmall.style.display = 'none'; - } + if (extract) extract.style.display = 'none'; + if (titleSmall) titleSmall.style.display = 'none'; if (videoFull) { videoFull.style.display = 'block'; - const iframe = videoFull.querySelector('iframe'); - if (iframe) { - const src = iframe.src; + function createPlayer() { + new YT.Player('youtube-player', { + videoId: playerDiv.dataset.videoId, + width: '100%', + height: '100%', + playerVars: { + autoplay: 1, + rel: 0, + }, + events: { + onReady: (e) => e.target.playVideo(), + }, + }); + } - // 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'); - } + if (ytReady) { + createPlayer(); + } else { + window.onYouTubeIframeAPIReady = createPlayer; } } }); diff --git a/site/templates/investigation.php b/site/templates/investigation.php index af39062..4e7191b 100644 --- a/site/templates/investigation.php +++ b/site/templates/investigation.php @@ -32,9 +32,12 @@ $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5); - videoUrl()->isNotEmpty()): ?> + videoUrl()->isNotEmpty()): + preg_match('/(?:embed\/|v=|youtu\.be\/)([a-zA-Z0-9_-]+)/', $page->videoUrl()->value(), $m); + $videoId = $m[1] ?? ''; + ?>
- +