Guide to the Fullscreen API
This article demonstrates how to use the Fullscreen API to place a given element into fullscreen mode, as well as how to detect when the browser enters or exits fullscreen mode.
Activating fullscreen mode
Given an element that you'd like to present in fullscreen mode (such as a , for example), you can present it in fullscreen mode by calling its requestFullscreen() method.
We can put that video into fullscreen mode as follows:
const elem = document.getElementById("my-video");
if (elem.requestFullscreen) {
elem.requestFullscreen();
}
This code checks for the existence of the requestFullscreen() method before calling it.
Once an element is in fullscreen mode, it is matched by :fullscreen, which gives it some default styles like taking up the entire screen. It is also placed in the top layer.
If multiple elements are requested to be displayed in fullscreen mode, they all get matched by :fullscreen and are all in the top layer. They stack on top each other, with more recently requested elements on top of older ones. The most recently requested element gets displayed and is returned by Document.fullscreenElement.
Notification
When fullscreen mode is successfully engaged, the document which contains the element receives a fullscreenchange event. When fullscreen mode is exited, the document again receives a fullscreenchange event. Note that the fullscreenchange event doesn't provide any information itself as to whether the document is entering or exiting fullscreen mode, but if the document has a non null fullscreenElement, you know you're in fullscreen mode.