The fullscreenEnabled() method returns a Boolean value indicating whether the document can be viewed in fullscreen mode.
The fullscreenEnabled() method returns true if fullscreen mode is available, otherwise false. Note: This method requires specific prefixes to work in different browsers (see Browser Support below).
Tip: Use the element.requestFullscreen() method to view an element in fullscreen mode.
Tip: Use the element.exitFullscreen() method to cancel fullscreen mode.
Syntax and Usage
document.fullscreenEnabled()
when return Value: A Boolean value, indicating whether the document can be viewed in fullscreen mode:
Example(1)
<script>
/* Get the element you want displayed in fullscreen */
var elem = document.getElementById("myvideo");
/* Function to open fullscreen mode */
function view_Fullscreen() {
/* If fullscreen mode is available, show the element in fullscreen */
if (
document.fullscreenEnabled || /* Standard syntax */
document.webkitFullscreenEnabled || /* Chrome, Safari & Opera */
document.mozFullScreenEnabled || /* Firefox */
document.msFullscreenEnabled /* IE/Edge */
) {
/* Show the element in fullscreen */
elem.webkitRequestFullscreen();
if (elem.requestFullscreen) {
elem.requestFullscreen(); /* Standard syntax */
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}
}
</script>
In above example displaying video in full screen view on click of button
Example(2)
<script>
/* Get the element you want displayed in fullscreen */
var elem = document.getElementById("myvideo");
/* Function to open fullscreen mode */
function openFullscreen() {
/* If fullscreen mode is available, show the element in fullscreen */
if (
document.fullscreenEnabled || /* Standard syntax */
document.webkitFullscreenEnabled || /* Chrome, Safari & Opera */
document.mozFullScreenEnabled || /* Firefox */
document.msFullscreenEnabled /* IE/Edge */
) {
/* Show the element in fullscreen */
elem.webkitRequestFullscreen();
if (elem.requestFullscreen) {
elem.requestFullscreen(); /* Standard syntax */
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}
}
</script>
In above example Using prefixes for cross-browser code
Complete code for HTML DOM FullscreenEnabled Method In JavaScript
<!DOCTYPE html>
<html>
<head>
<title>FullscreenEnabled Method In JavaScript</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<br>
<br>
<div class="text-center">
<h1>FullscreenEnabled Method In JavaScript</h1>
</div>
<br>
<div class="well">
<p>Click on the button to open the video in fullscreen mode.</p>
<br>
<button class="btn btn-primary" onclick="view_Fullscreen();">Open Video in Fullscreen Mode</button>
<br>
<p><strong>Tip:</strong> Press the "Esc" key to exit full screen.</p>
<br>
<video width="50%" controls id="myvideo">
<source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<br>
</div>
</body>
</html>
<script>
/* Get the element you want displayed in fullscreen */
var elem = document.getElementById("myvideo");
/* Function to open fullscreen mode */
function view_Fullscreen() {
/* If fullscreen mode is available, show the element in fullscreen */
if (
document.fullscreenEnabled || /* Standard syntax */
document.webkitFullscreenEnabled || /* Chrome, Safari & Opera */
document.mozFullScreenEnabled || /* Firefox */
document.msFullscreenEnabled /* IE/Edge */
) {
/* Show the element in fullscreen */
elem.webkitRequestFullscreen();
if (elem.requestFullscreen) {
elem.requestFullscreen(); /* Standard syntax */
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}
}
</script>