05604ea6ef
- 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>
50 lines
1.3 KiB
JavaScript
50 lines
1.3 KiB
JavaScript
|
|
export function playVideo() {
|
|
const playButton = document.querySelector('#hero-play-video');
|
|
if (!playButton) return;
|
|
|
|
const playerDiv = document.querySelector('#youtube-player');
|
|
if (!playerDiv) return;
|
|
|
|
// 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 (videoFull) {
|
|
videoFull.style.display = 'block';
|
|
|
|
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(),
|
|
},
|
|
});
|
|
}
|
|
|
|
if (ytReady) {
|
|
createPlayer();
|
|
} else {
|
|
window.onYouTubeIframeAPIReady = createPlayer;
|
|
}
|
|
}
|
|
});
|
|
}
|