We can use the requestFullscreen() method on any element to make an element full screen. This method makes an asynchronous request for the element to be displayed in full-screen mode.
We will be using 2 methods, 2 properties, and 1 event to implement this full-screen functionality.
requestFullscreen – changes to full screenexitFullscreen – exits from full screendocument.fullscreenElement – checks if any element is already in full screen modedocument.fullScreenEnabled – checks if the current page has permission to show elements in full page modefullscreenchange – event will be triggered on full screen to enter and exitfunction enterFullScreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
}else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen(); // Firefox
}else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen(); // Safari
}else if(element.msRequestFullscreen) {
element.msRequestFullscreen(); // IE/Edge
}
};
We can call the exitFullScreen method to exit full screen mode.
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
};
Let’s create a page with a video and a “go-to full-screen” button. Upon clicking the button, the video should be played in full screen.
<html>
<head>
</head>
<body>
<video id="videoElement" width="400" height="250" controls="true" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WeAreGoingOnBullrun.mp4"></video>
<button id="full_screen">Go full screen</button>
</body>
</html>
Our script has:
function enterFullScreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
}else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen(); // Firefox
}else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen(); // Safari
}else if(element.msRequestFullscreen) {
element.msRequestFullscreen(); // IE/Edge
}
};
let btn = document.getElementById("full_screen");
btn.addEventListener("click", function(){
let videoEle = document.querySelector('video');
enterFullScreen(videoEle);
});
document.addEventListener('fullscreenchange', (event) => {
if (document.fullscreenElement) {
console.log('Entered fullscreen:', document.fullscreenElement);
} else {
console.log('Exited fullscreen.');
}
});
This is the complete implementation.
Here, the
Go full screenbutton will not show the expected result because it is blocked on our platform.
Free Resources