Fullscreen API | Frontend Practical Guide

Limited supportUse with care and provide a fallback when broad support matters.

Overview

The fullscreen API makes a specific element fill the whole screen and hides most browser UI. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

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
`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
`html.elements.iframe.allow.fullscreen`	62	79	80		62
`http.headers.Permissions-Policy.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

HTML

document.getElementById('video').requestFullscreen();

// Exit fullscreen
document.exitFullscreen();

// Detect fullscreen status
document.addEventListener('fullscreenchange', () => {
  console.log('Fullscreen:', !!document.fullscreenElement);
});

Live demo

Request fullscreen

Use requestFullscreen on a container and update status text when the state changes.

PreviewFullscreen

Fullscreen support note

Summarize common fullscreen entry points on elements and media.

PreviewFullscreen

Presentation checklist

Pair the API with a few operational notes for accessibility and escape handling.

PreviewFullscreen

Use cases

Use Fullscreen API
Use Fullscreen API when standard HTML needs a more specific platform feature, semantic signal, or browser capability.
Handle edge cases
Apply Fullscreen API to solve a focused requirement without redesigning the whole page architecture.

Cautions

Test Fullscreen API in your target browsers and input environments before depending on it as a primary behavior.
Provide a fallback path or acceptable degradation strategy when support is still limited.

Overview

Browser support

Syntax

Live demo

Request fullscreen

Fullscreen support note

Presentation checklist

Use cases

Use Fullscreen API

Handle edge cases

Cautions

Accessibility

Related links