document.querySelectorAll('.video-container').forEach(container => {
    const video = container.querySelector('video');
    const playButton = container.querySelector('#play-button');
    const fullscreenButton = container.querySelector('.fullscreen-button');

    // Lorsqu'on clique sur la vidéo elle-même
    video.addEventListener('click', () => {
        if (video.paused) {
            video.play();  // Lire la vidéo
            playButton.style.display = 'none';  // Cacher le bouton Play
            video.style.objectFit = 'contain';  // Garder l'aspect portrait pendant la lecture
            fullscreenButton.style.display = 'block';
            video.volume = 0.2;  // Mettre le volume à 10%
        } else {
            video.pause();  // Mettre en pause la vidéo
            playButton.style.display = 'block';  // Afficher le bouton Play
            fullscreenButton.style.display = 'none';  // Afficher le bouton Play
            video.style.objectFit = 'contain';  // Revenir à l'aspect portrait
        }
    });
    playButton.addEventListener('click', () => {
        if (video.paused) {
            video.play();  // Lire la vidéo
            playButton.style.display = 'none';  // Cacher le bouton Play
            video.style.objectFit = 'contain';  // Garder l'aspect portrait pendant la lecture
            fullscreenButton.style.display = 'block';
            video.volume = 0.2;  // Mettre le volume à 10%
        } else {
            video.pause();  // Mettre en pause la vidéo
            playButton.style.display = 'block';  // Afficher le bouton Play
            fullscreenButton.style.display = 'none';  // Afficher le bouton Play
            video.style.objectFit = 'contain';  // Revenir à l'aspect portrait
        }
    });

    // Gérer le bouton de lecture personnalisé
    playButton.addEventListener('click', () => {
        if (video.paused) {
            video.play();  // Lire la vidéo
            playButton.style.display = 'none';  // Cacher le bouton Play
            video.style.objectFit = 'contain';  // Garder l'aspect portrait pendant la lecture
            video.volume = 0.1;  // Mettre le volume à 10%
        }
    });
    if (fullscreenButton) {
        fullscreenButton.addEventListener('click', () => {
            if (video.requestFullscreen) {
                video.requestFullscreen();
            } else if (video.mozRequestFullScreen) { // Firefox
                video.mozRequestFullScreen();
            } else if (video.webkitRequestFullscreen) { // Chrome, Safari et Opera
                video.webkitRequestFullscreen();
            } else if (video.msRequestFullscreen) { // IE/Edge
                video.msRequestFullscreen();
            }
        });
    }
});