Fullscreen API requestFullscreen()

❮ Previous ❮ Fullscreen API Reference Next ❯

Example

Show a <video> element in fullscreen mode:

/* Get the element you want displayed in fullscreen mode (a video in this example): */
var elem = document.getElementById("myvideo");

/* When the openFullscreen() function is executed, open the video in fullscreen.
Note that we must include prefixes for different browsers, as they don't support the requestFullscreen property yet */
function openFullscreen() {
if (elem.requestFullscreen) {
    elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
}
}

Try it Yourself »

More "Try it Yourself" examples below.

Description

The requestFullscreen() method opens an element in fullscreen mode.

Tip: Use the exitFullscreen() method to cancel fullscreen mode.

Browser Support

The numbers in the table specify the first browser version that fully supports the method. Note: Some browsers require a specific prefix (see parentheses):

Method
requestFullscreen()	71.0 15.0 (webkit)	79.0 11.0 (ms)	64.0 9.0 (moz)	6.0 (webkit)	58.0 15.0 (webkit)

Syntax

HTMLElementObject.requestFullscreen()

Parameters

None

Technical Details

Return Value:	No return value

More Examples

To open the HTML page in fullscreen, use the document.documentElement instead of document.getElementById("element"). In this example, we also use a close function to close the fullscreen:

Example

/* Get the documentElement (<html>) to display the page in fullscreen */
var elem = document.documentElement;

/* View in fullscreen */
function openFullscreen() {
if (elem.requestFullscreen) {
    elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
}
}

/* Close fullscreen */
function closeFullscreen() {
if (document.exitFullscreen) {
    document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
}
}

Try it Yourself »

You can also use CSS to style the page when it is in fullscreen mode:

Example

/* Safari */
:-webkit-full-screen {
background-color: yellow;
}

/* IE11 syntax */
:-ms-fullscreen {
background-color: yellow;
}

/* Standard syntax */
:fullscreen {
background-color: yellow;
}

Try it Yourself »

❮ Previous ❮ Fullscreen API Reference Next ❯