Developed By
Gautam Kumar - Full stack developer
DEEP DIVE INTO
There is no specific "HTML fullscreen
API" in HTML5. However, HTML5 does provide a Fullscreen API that allows you to request and manage fullscreen mode for elements on a web page.
This API is primarily used for making specific elements, such as videos or games, go into fullscreen mode. Below, I'll provide a deep dive into how the Fullscreen API works.
1. Feature Detection:
Before using the Fullscreen API, checking if the browser supports it is important. You can do this by checking the document.fullscreenEnabled
property is true.
javascriptif (document.fullscreenEnabled) {
// Fullscreen API is supported
} else {
// Fullscreen API is not supported
}
2. Requesting Fullscreen:
To make an element go into fullscreen mode, you can use the requestFullscreen() method on the element.
For example, if you have a <div>
element with an id of "myElement," you can request fullscreen mode for it like this:
javascriptconst element = document.getElementById("myElement");
element.requestFullscreen();
3. Exiting Fullscreen:
To exit fullscreen mode programmatically, you can use the document.exitFullscreen()
method.
javascriptif (document.fullscreenElement) {
document.exitFullscreen();
}
4. Fullscreen Events: The Fullscreen API provides events that you can use to detect changes in fullscreen status. These events include:
fullscreenchange
: Fired when the fullscreen mode changes.
fullscreenerror
: Fired when an error occurs when trying to enter fullscreen mode.
You can add event listeners to handle these events, like so:
javascriptdocument.addEventListener("fullscreenchange", function () {
if (document.fullscreenElement) {
// Element is in fullscreen mode
} else {
// Element is not in fullscreen mode
}
});
Here's a more complete example of using the Fullscreen API:
html<!DOCTYPE html>
<html>
<head>
<title>Fullscreen API Example</title>
</head>
<body>
<div id="myElement" style="background-color: lightblue; width: 300px; height: 200px;">
<button id="fullscreenButton">Toggle Fullscreen</button>
</div>
<script>
const element = document.getElementById("myElement");
const fullscreenButton = document.getElementById("fullscreenButton");
fullscreenButton.addEventListener("click", () => {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
element.requestFullscreen();
}
});
document.addEventListener("fullscreenchange", () => {
if (document.fullscreenElement) {
console.log("Element is in fullscreen mode");
} else {
console.log("Element is not in fullscreen mode");
}
});
</script>
</body>
</html>
In this example, there's a <div> element with a button to toggle fullscreen mode. When you click the button, it either requests fullscreen or exits fullscreen, depending on the current state.
Please note that browser support for the Fullscreen API may vary, and it's essential to test your implementation in different browsers.
warningAdditionally, the API and browser support may have evolved since MDN's last update in September 2021, so it's a good practice to refer to the latest documentation and browser compatibility information for the most up-to-date details.
”