What is the Fullscreen API?
Web APIs: Fullscreen API
The Fullscreen API adds methods to present a specific element (and its descendants) in full-screen mode and to exit.
This API enables full-screen mode in web apps and lets you select the element you want to view in full-screen mode.
In Android phones, it removes the browser’s window and the Android top status bar (where the network status, battery status, etc. are displayed).
Methods
requestFullscreen: displays the selected element in full-screen mode on the system, shutting off other apps, the browser, and system UI elements.
exitFullscreen: exits full-screen mode to normal mode.
Let’s see a simple example where we can use full-screen mode to watch a video:
<body>
<header>
<h2>Web APIs<h2>
</header>
<div>
<div>
<div>
Demo - Fullscreen
</div>
<div>
<div id="error"></div>
<div>
</div>
<div>
<video id="video" src="./video.mp4"></video>
<button onclick="toggle()">Toogle Fullscreen</button>
</div>
<div>
</div>
</div>
</div>
</div>
</body>
This API makes the full-screen mode of our webpage possible. It lets you select the element you want to view in full-screen mode, then shuts off the browser’s window features (i.e., URL bar, the windowpane) and presents the element to take the entire width and height of the system.
In Android phones, it will remove the browsers window and the Android UI where the network status and battery status are displayed, and display the Element in the full width of the Android system.
<script>
const l =console.log
function toggle() {
const videoStageEl = document.querySelector(".video-stage")
if(videoStageEl.requestFullscreen) {
if(!document.fullscreenElement){
videoStageEl.requestFullscreen()
}
else {
document.exitFullscreen()
}
} else {
error.innerHTML = "Fullscreen API not supported in this device."
error.classList.remove("close")
}
}
</script>
See that the video element is in the div#video-stage element with a Toggle Fullscreen button.
We want to make the element div#video-stage go full-screen when we click on the Toggle Fullscreen button.
See the function toggle:
function toggle() {
const videoStageEl = document.querySelector(".video-stage")
if(!document.fullscreenElement)
videoStageEl.requestFullscreen()
else
document.exitFullscreen()
}
It queries the div#video-stage element and holds its HTMLDivElement instance on videoStageEl.
We use the document.fullsreenElement property to find out whether the document is not in full-screen, so we can call requestFullscreen() on videoStageEl. This will make the div#video-stage take over the entire device view.
If we click on the Toggle Fullscreen button on the fullscreen mode, the exitFullcreen is called on the document and the UI view is returned to the normal view.
Try it here.
- undefined by undefined
- undefined by undefined
