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>

<script>
function goFullScreen() {
var element = document.getElementById("video-container");
if (element.requestFullscreen) {
element.requestFullscreen(); // Standard method
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen(); // Firefox
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen(); // Chrome, Safari & Opera
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen(); // IE/Edge
}
}

function exitFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen(); // Standard method
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen(); // Firefox
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen(); // Chrome, Safari, and Opera
} else if (document.msExitFullscreen) {
document.msExitFullscreen(); // IE/Edge
}
}

// Event listeners for fullscreen changes