The Element.requestFullscreen()
method issues an asynchronous request to make the element be displayed in full-screen mode.
It's not guaranteed that the element will be put into full screen mode. If permission to enter full screen mode is granted, the returned Promise
will resolve and the element will receive a fullscreenchange
event to let it know that it's now in full screen mode. If permission is denied, the promise is rejected and the element receives a fullscreenerror
event instead. If the element has been detached from the original document, then the document receives these events instead.
Earlier implementations of the Fullscreen API would always send these events to the document rather than the element, and you may need to be able to handle that situation. Check [[../../../../Archive/Add-ons/Events/fullscreen#Browser_compatibility|Browser compatibility]] in [[../../../../Archive/Add-ons/Events/fullscreen|fullscreen]] for specifics on when each browser made this change.
Note: This method must be called while responding to a user interaction or a device orientation change; otherwise it will fail.
Syntax
var promise = Element.requestFullscreen(options);
Parameters
options
Optional- A
FullscreenOptions
object providing options that control the behavior of the transition to full-screen mode. Currently, the only option isnavigationUI
, which controls whether or not to show navigation UI while the element is in full-screen mode. The default value is"auto"
, which indicates that the browser should decide what to do.
Return value
A Promise
which is resolved with a value of undefined
when the transition to full screen is complete.
Exceptions
Rather than throw a traditional exception, the requestFullscreen()
procedure announces error conditions by rejecting the Promise
it has returned. The rejection handler receives one of the following exception values:
TypeError
- The
TypeError
exception may be delivered in any of the following situations:
- The document containing the element isn't fully active; that is, it's not the current active document.
- The element is not contained by a document.
- The element is not permitted to use the
"fullscreen"
feature, either because of Feature Policy configuration or other access control features. - The element and its document are the same node.
Usage notes
Compatible elements
An element that you wish to place into full-screen mode has to meet a small number of simple requirements:
- It must be one of the standard HTML elements or
<svg>
or<math>
. - It is not a
<dialog>
element. - It must either be located within the top-level document or in an
<iframe>
which has theallowfullscreen
attribute applied to it.
Additionally, of course, the Feature Policy "fullscreen"
permission must be granted.
Detecting full-screen activation
You can determine whether or not your attempt to switch to full-screen mode is successful by using the Promise
returned by requestFullscreen()
, as seen in the Example below.
To learn when other code has toggled full-screen mode on and off, you should establish listeners for the fullscreenchange
event on the Document
. It's also important to listen for fullscreenchange
to be aware when, for example, the user manually toggles full-screen mode, or when the user switches applications, causing your application to temporarily exit full-screen mode.
Examples
This function toggles the first <video>
element found in the document into and out of full-screen mode.
function toggleFullscreen() {
let elem = document.querySelector("video");
if (!document.fullscreenElement) {
elem.requestFullscreen().catch(err => {
alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
});
} else {
document.exitFullscreen();
}
}
If the document isn't already in full-screen mode—detected by looking to see if document.fullscreenElement
has a value—we call the video's requestFullscreen()
method. We don't need to do anything special if successful, but if the request fails, our promise's catch()
handler presents an alert with an appropriate error message.
If, on the other hand, full-screen mode is already in effect, we call document.exitFullscreen()
to disable full-screen mode.
You can see this example in action or view or remix the code on Glitch.
Specifications
Specification | Status | Comment |
---|---|---|
Fullscreen APIThe definition of 'Element.requestFullscreen()' in that specification. | Living Standard | Initial definition |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
requestFullscreen
|
Chrome Full support 71 Full support 71 Full support 15 Prefixed' Implemented with the vendor prefix: webkit |
Edge Full support 79 Full support 79 Full support 79 Prefixed' Implemented with the vendor prefix: webkit No support 12 — 14 Prefixed' Implemented with the vendor prefix: webkit |
Firefox Full support 64 Full support 64 No support 47 — 65 Disabled' From version 47 until version 65 (exclusive): this feature is behind the Notes' Before Firefox 44, Firefox incorrectly allowed elements inside a |
IE Full support 11 Full support 11 Prefixed' Implemented with the vendor prefix: ms |
Opera Full support 58 Full support 58 Full support 15 Prefixed' Implemented with the vendor prefix: webkit No support 12 — 15 Prefixed' Implemented with the vendor prefix: o |
Safari Full support 6 Full support 6 Prefixed' Implemented with the vendor prefix: webkit |
WebView Android Full support 71 Full support 71 Full support ≤37 Prefixed' Implemented with the vendor prefix: webkit |
Chrome Android Full support 71 Full support 71 Full support 18 Prefixed' Implemented with the vendor prefix: webkit |
Firefox Android Full support 64 Full support 64 No support 47 — 65 Disabled' From version 47 until version 65 (exclusive): this feature is behind the Notes' Before Firefox 44, Firefox incorrectly allowed elements inside a |
Opera Android Full support 50 Full support 50 Full support 14 Prefixed' Implemented with the vendor prefix: webkit No support 12 — 14 Prefixed' Implemented with the vendor prefix: o |
Safari iOS Full support 6 Full support 6 Prefixed' Implemented with the vendor prefix: webkit Notes' Only available on iPad, not on iPhone. Shows an overlay button which can not be disabled. |
Samsung Internet Android Full support 10.0 Full support 10.0 Full support 1.0 Prefixed' Implemented with the vendor prefix: webkit |
options parameter
|
Chrome
Full support 71 |
Edge
Full support 79 |
Firefox
Full support 64 |
IE
No support No |
Opera
? |
Safari
? |
WebView Android
Full support 71 |
Chrome Android
Full support 71 |
Firefox Android
Full support 64 |
Opera Android
? |
Safari iOS
? |
Samsung Internet Android
Full support 10.0 |
Returns a Promise
|
Chrome
Full support 69 |
Edge
Full support 79 |
Firefox
Full support 64 |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
Full support 69 |
Chrome Android
Full support 69 |
Firefox Android
Full support 64 |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
Full support 10.0 |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- See implementation notes.'
- See implementation notes.
- User must explicitly enable this feature.'
- User must explicitly enable this feature.
- Uses a non-standard name.'
- Uses a non-standard name.
- Requires a vendor prefix or different name for use.'
- Requires a vendor prefix or different name for use.
See also
- Fullscreen API
Document.exitFullscreen()
Document.fullscreen
Document.fullscreenElement
:fullscreen
allowfullscreen
Element.requestFullscreen() by Mozilla Contributors is licensed under CC-BY-SA 2.5.