Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Create Fullscreen API using JavaScript?
The Fullscreen API is a browser API that allows developers to request fullscreen display from the user, and to exit fullscreen when desired.
Using the Fullscreen API is relatively simple. First, you must check if the browser you are using supports the Fullscreen API. You can do this by checking for the presence of the requestFullscreen method on any element.
If the browser does not support the Fullscreen API, you can still provide a fullscreen experience to your users by using another method, such as opening a new browser window.
The function that requests full screen display must be called within a user-initiated event, such as a click event, for security reasons.
Syntax
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
}
To open the page in fullscreen, we use the requestFullscreen() method on any element.
Key Methods
The Fullscreen API provides several essential methods:
-
element.requestFullscreen()- Requests fullscreen for the specified element -
document.exitFullscreen()- Exits fullscreen mode -
document.fullscreenElement- Returns the current fullscreen element or null -
document.fullscreenEnabled- Checks if fullscreen is available
Example: Opening Page in Fullscreen Mode
In this example, we create a Fullscreen API using JavaScript that opens the output window in full screen mode on clicking the button. We also include an exit button to exit full screen.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fullscreen API Demo</title>
</head>
<body>
<h1>Full Screen API with JavaScript</h1>
<p>Click on the "Enter Full Screen" button to open in Fullscreen mode</p>
<button onclick="EnterFullScreen();">
Enter Full Screen
</button>
<button onclick="ExitFullScreen();">Exit Full Screen</button>
<p>Click on the "Exit Full Screen" button or press "Esc" key to exit fullscreen</p>
<script>
function EnterFullScreen() {
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
}
}
function ExitFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
// Listen for fullscreen changes
document.addEventListener('fullscreenchange', function() {
if (document.fullscreenElement) {
console.log('Entered fullscreen mode');
} else {
console.log('Exited fullscreen mode');
}
});
</script>
</body>
</html>
Example: Opening Video in Fullscreen Mode
In this example, we create a Fullscreen API to open a specific video element in full screen mode.
<!DOCTYPE html>
<html>
<body>
<h1>Full Screen API with JavaScript</h1>
<p>Click on the "Enter Full Screen" button to open video in full screen mode</p>
<button onclick="EnterFullScreen();">
Enter Full Screen
</button>
<p>Press "Esc" key to exit fullscreen</p>
<video id="myvideo" width="400" height="300" controls>
<source src="/html/mov_bbb.mp4" type="video/mp4">
<source src="/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<script>
var elem = document.getElementById("myvideo");
function EnterFullScreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
}
</script>
</body>
</html>
Detecting Fullscreen Changes
You can listen for fullscreen state changes using the fullscreenchange event:
<script>
document.addEventListener('fullscreenchange', function() {
if (document.fullscreenElement) {
console.log('Element entered fullscreen:', document.fullscreenElement);
} else {
console.log('Exited fullscreen mode');
}
});
// Check if fullscreen is supported
if (document.fullscreenEnabled) {
console.log('Fullscreen is supported');
} else {
console.log('Fullscreen is not supported');
}
</script>
Browser Compatibility
The Fullscreen API is supported in all major browsers, including Chrome, Firefox, Safari, and Edge. However, some older browsers may require vendor prefixes. Modern implementations use the standard prefixes shown in the examples above.
| Browser | Standard Support | Prefix Required |
|---|---|---|
| Chrome 71+ | Yes | No |
| Firefox 64+ | Yes | No |
| Safari 16+ | Yes | webkit- for older versions |
| Edge 79+ | Yes | No |
Key Benefits and Considerations
The Fullscreen API provides several benefits: it allows you to create more immersive experiences, reduces distractions, and can be used for presentations or media viewing. However, consider that it must be triggered by user interaction and some users may find fullscreen disorienting.
Conclusion
The Fullscreen API is a powerful tool for creating immersive web experiences. Use requestFullscreen() on elements and document.exitFullscreen() to control fullscreen mode, always ensuring user-initiated activation for security.
1K+ Views
