Given an element that you'd like to present in fullscreen mode (such as a<video>, for example), you can present it in fullscreen mode by calling itsrequestFullscreen() method.

Let's consider this<video> element:

<video controls>  <source src="somevideo.webm" />  <source src="somevideo.mp4" /></video>

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 therequestFullscreen() 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 thetop 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 byDocument.fullscreenElement.

When fullscreen mode is successfully engaged, the document which contains the element receives afullscreenchange event. When fullscreen mode is exited, the document again receives afullscreenchange event. Note that thefullscreenchange 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 nullfullscreenElement, you know you're in fullscreen mode.

It's not guaranteed that you'll be able to switch into fullscreen mode. For example,<iframe> elements have theallowfullscreen attribute in order to opt-in to allowing their content to be displayed in fullscreen mode. In addition, certain kinds of content, such as windowed plug-ins, cannot be presented in fullscreen mode. Attempting to put an element which can't be displayed in fullscreen mode (or the parent or descendant of such an element) won't work. Instead, the element which requested fullscreen will receive afullscreenerror event. When a fullscreen request fails, Firefox will log an error message to the Web Console explaining why the request failed. In Chrome and newer versions of Opera however, no such warning is generated.

The user always has the ability to exit fullscreen mode of their own accord; seeThings your users want to know. You can also do so programmatically by calling theDocument.exitFullscreen() method.

If there are multiple elements in fullscreen mode, callingexitFullscreen() only exits the topmost element, revealing the next element below it. PressingEsc orF11 exits all fullscreen elements.

TheDocument provides some additional information that can be useful when developing fullscreen web applications:

Document.fullscreenElement /ShadowRoot.fullscreenElement

ThefullscreenElement property tells you theElement that's currently being displayed fullscreen. If this is non-null, the document (or shadow DOM) is in fullscreen mode. If this is null, the document (or shadow DOM) is not in fullscreen mode.

Document.fullscreenEnabled

ThefullscreenEnabled property tells you whether or not the document is currently in a state that would allow fullscreen mode to be requested.

Some mobile browsers while in fullscreen mode ignore viewport meta-tag settings and block user scaling; for example: a "pinch to zoom" gesture may not work on a page presented in fullscreen mode — even if, when not in fullscreen mode, the page can be scaled using pinch to zoom.

You'll want to be sure to let your users know that they can press theEsc key (orF11) to exit fullscreen mode.

In addition, navigating to another page, changing tabs, or switching to another application (using, for example,Alt-Tab) while in fullscreen mode exits fullscreen mode as well.

Themdn/dom-examples GitHub repo has a complete example of the Fullscreen API.

Run the example andbrowse the source code.

• Using fullscreen mode
• Element.requestFullscreen()
• Document.exitFullscreen()
• Document.fullscreen
• Document.fullscreenElement
• :fullscreen,::backdrop
• allowfullscreen