Fullscreen API
TheFullscreen API adds methods to present a specificElement (and its descendants) in fullscreen mode, and to exit fullscreen mode once it is no longer needed. This makes it possible to present desired content—such as an online game—using the user's entire screen, removing all browser user interface elements and other applications from the screen until fullscreen mode is shut off.
See the articleGuide to the Fullscreen API for details on how to use the API.
Interfaces
The Fullscreen API has no interfaces of its own. Instead, it augments several other interfaces to add the methods, properties, and event handlers needed to provide fullscreen functionality. These are listed in the following sections.
Instance methods
The Fullscreen API adds methods to theDocument andElement interfaces to allow turning off and on fullscreen mode.
Instance methods on the Document interface
Document.exitFullscreen()Requests that theuser agent switch from fullscreen mode back to windowed mode. Returns a
Promisewhich is resolved once fullscreen mode has been completely shut off.
Instance methods on the Element interface
Element.requestFullscreen()Asks the user agent to place the specified element (and, by extension, its descendants) into fullscreen mode, removing all of the browser's UI elements as well as all other applications from the screen. Returns a
Promisewhich is resolved once fullscreen mode has been activated.
Instance properties
Document.fullscreenElement/ShadowRoot.fullscreenElementThe
fullscreenElementproperty tells you theElementthat's currently being displayed in fullscreen mode on the DOM (or shadow DOM). If this isnull, the document (or shadow DOM) is not in fullscreen mode.Document.fullscreenEnabledThe
fullscreenEnabledproperty tells you whether or not it is possible to engage fullscreen mode. This isfalseif fullscreen mode is not available for any reason (such as the"fullscreen"feature not being allowed, or fullscreen mode not being supported).
Obsolete properties
Document.fullscreenDeprecatedA Boolean value which is
trueif the document has an element currently being displayed in fullscreen mode; otherwise, this returnsfalse.Note:Use the
fullscreenElementproperty on theDocumentorShadowRootinstead; if it's notnull, then it's anElementcurrently being displayed in fullscreen mode.
Events
fullscreenchangeSent to an
Elementwhen it transitions into or out of fullscreen mode.fullscreenerrorSent to an
Elementif an error occurs while attempting to switch it into or out of fullscreen mode.
Controlling access
The availability of fullscreen mode can be controlled using aPermissions Policy. The fullscreen mode feature is identified by the string"fullscreen", with a default allowlist value of"self", meaning that fullscreen mode is permitted in top-level document contexts, as well as to nested browsing contexts loaded from the same origin as the top-most document.
Usage notes
Users can choose to exit fullscreen mode by pressing theESC (orF11) key, rather than waiting for the site or app to programmatically do so. Make sure you provide, somewhere in your user interface, appropriate user interface elements that inform the user that this option is available to them.
Note:Navigating to another page, changing tabs, or switching to another application using any application switcher (orAlt-Tab) will likewise exit fullscreen mode.
Examples
Simple fullscreen usage
In this example, a video is presented in a web page. Pressing theEnter key lets the user toggle between windowed and fullscreen presentation of the video.
Watching for the Enter key
When the page is loaded, this code is run to set up an event listener to watch for theEnter key.
const video = document.getElementById("video");// On pressing ENTER call toggleFullScreen methoddocument.addEventListener("keydown", (e) => { if (e.key === "Enter") { toggleFullScreen(video); }});Toggling fullscreen mode
This code is called by the event handler above when the user hits theEnter key.
function toggleFullScreen(video) { if (!document.fullscreenElement) { // If the document is not in full screen mode // make the video full screen video.requestFullscreen(); } else { // Otherwise exit the full screen document.exitFullscreen?.(); }}This starts by looking at the value of thedocument'sfullscreenElement attribute. If the value isnull, the document is currently in windowed mode, so we need to switch to fullscreen mode; otherwise, it's the element that's currently in fullscreen mode. Switching to fullscreen mode is done by callingElement.requestFullscreen() on the<video> element.
If fullscreen mode is already active (fullscreenElement is notnull), we callexitFullscreen() on thedocument to shut off fullscreen mode.