Fullscreen API | Frontend Practical Guide

Limited support Limited browser support. Check compatibility before use.

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`:fullscreen`	71	12	64	16.4	71	16.4
HTML attribute
`allow (fullscreen)`	62	79	80		62
`allowfullscreen`	38	12	18	10.1	38	12
DOM API
`exitFullscreen` The Document method exitFullscreen() requests that the element on this document which is currently being presented in fullscreen mode be taken out of fullscreen mode, restoring the previous state of the screen. This usually reverses the effects of a previous call to Element.requestFullscreen().	71	79	64	16.4	71	16.4
`exitFullscreen (returns promise)` Returns a `Promise`	69	79	64	16.4	69	16.4
`fullscreenchange_event` The fullscreenchange event is fired immediately after the browser switches into or out of fullscreen mode.	71	79	64	16.4	71	16.4
`fullscreenElement` The Document.fullscreenElement read-only property returns the that is currently being presented in fullscreen mode in this document, or null if fullscreen mode is not currently in use.	71	79	64	16.4	71	16.4
`fullscreenEnabled` The read-only fullscreenEnabled property on the Document interface indicates whether or not fullscreen mode is available.	71	12	64	16.4	71	16.4
`fullscreenerror_event` The fullscreenerror event is fired when the browser cannot switch to fullscreen mode.	71	79	64	16.4	71	16.4
`fullscreenchange_event` The fullscreenchange event is fired immediately after an Element switches into or out of fullscreen mode.	71	79	64	16.4	71	16.4
`fullscreenerror_event` The fullscreenerror event is fired when the browser cannot switch to fullscreen mode.	71	79	64	16.4	71	16.4
`requestFullscreen` The Element.requestFullscreen() method issues an asynchronous request to make the element be displayed in fullscreen mode.	71	79	64	16.4	71	16.4
`requestFullscreen (options navigationUI parameter)` `options.navigationUI` parameter	71	79		16.4	71
`requestFullscreen (returns promise)` Returns a `Promise`	71	79	64	16.4	71	16.4
`allowFullscreen` The allowFullscreen property of the HTMLIFrameElement interface is a boolean value that reflects the allowfullscreen attribute of the iframe element, indicating whether to allow the iframe's contents to use Element.requestFullscreen.	38	12	22	10.1	38	12
`fullscreenElement` The fullscreenElement read-only property of the ShadowRoot interface returns the element within the shadow tree that is currently displayed in full screen.	71	79	64	16.4	71	16.4
CSS selector
`fullscreen` Fullscreen support	69	12	47	16.4	69	16.4
`all elements` Select all elements in the fullscreen stack		12	43
Other
`fullscreen` Experimental The HTTP Permissions-Policy header fullscreen directive controls whether the current document is allowed to use Element.requestFullscreen().	88	88			88

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT

document.onclick = (event) => {
  if (document.fullscreenElement) {
    document
      .exitFullscreen()
      .then(() => console.log("Document Exited from Full screen mode"))
      .catch((err) => console.error(err));
  } else {
    document.documentElement.requestFullscreen();
  }
};

Use cases

Using Fullscreen API

The Document method

Cautions

Limited browser support. Check compatibility before use.

Implementation notes

Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.

Browser support

Syntax

Use cases

Using Fullscreen API

Cautions

Implementation notes

Related links