HTML Editor - Edit Your Source Code Online

Source Code: (back to article)

<div id="main-content">
    <button onclick="goFullScreen();">Go Fullscreen</button>
    <div id="video-container" style="position: relative; height: 100vh; display: flex; align-items: center; justify-content: center;">
        <div id="exit-button" style="display: none;">
            <button onclick="exitFullScreen();">Exit Fullscreen</button>
        </div>
    </div>
</div>

// Event listeners for fullscreen changes
function updateButtonVisibility() {
    var fsElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
    var exitButton = document.getElementById("exit-button");
    exitButton.style.display = fsElement ? "block" : "none";  // Show or hide the exit button
}

document.addEventListener("fullscreenchange", updateButtonVisibility);
document.addEventListener("mozfullscreenchange", updateButtonVisibility);
document.addEventListener("webkitfullscreenchange", updateButtonVisibility);
document.addEventListener("MSFullscreenChange", updateButtonVisibility);
</script>