Full screen Video PopUp

Για να μετατρέψουμε ένα video σε Full screen Video PopUp μπορούμε να το κάνουμε εύκολα με την συνάρτηση requestFullscreen().

Στον παρακάτω κώδικα παίρνουμε το σενάριο ότι έχουμε ένα βίντεο σε ένα σημείο στην ιστοσελίδα που παίζει εξ αρχής χωρίς ήχο. Μέσω ενός button όταν το πατάει το βίντεο θα γίνεται full screen, θα ξεκινάει από την αρχή και θα παίζει με ήχο. Όταν βγω από το full screen τότε το video θα επανέρχεται σε κατάσταση mute.

HTML

<video muted autoplay loop playsinline data-nb_video">
     <source src=".../video.mp4" type="video/mp4">
</video>

<button data-nb_open_video_full_screen>Open Video</button>

JavaScript

let the_video = document.querySelector("[data-nb_video]");
let button = document.querySelector("[data-nb_open_video_full_screen]");

function openFullscreen(video) {
    if (video.requestFullscreen) {
        video.requestFullscreen();
    } else if (video.mozRequestFullScreen) { // Firefox
        video.mozRequestFullScreen();
    } else if (video.webkitRequestFullscreen) { // Chrome, Safari and Opera
        video.webkitRequestFullscreen();
    } else if (video.msRequestFullscreen) { // IE/Edge
        video.msRequestFullscreen();
    }
}

if (the_video && button) {
    document.addEventListener('fullscreenchange', () => {
        if (!document.fullscreenElement) {
            the_video.muted = true; // Mute the video when exiting fullscreen
        }
    });

    button.addEventListener('click', () => {
        the_video.muted = false; // Unmute the video before playing
        the_video.currentTime = 0; // Set video to start
        the_video.play(); // Start playing
        openFullscreen(the_video)
    })
}