Fullscreen API requestFullscreen() method

Definition and usage

requestFullscreen() Method to open an element in full screen mode.

Tip:Please use exitFullscreen() methodExit full screen mode.

Instance

Example 1

Display the <video> element in full screen mode:

/* Get the element to be displayed in full screen mode (video in this example):*/
var elem = document.getElementById("myvideo");
/* When executing the openFullscreen() function, open the video in full screen.
Please note that we must include different browser prefixes because they do not yet support the requestFullscreen attribute */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

Try It Yourself

Example 2

To open an HTML page in full screen, please use document.documentElement instead of document.getElementById("element").In this example, we also use a close function to exit full screen:

/* Get documentElement (<html>) to display the page in full-screen */
var elem = document.documentElement;
/* Fullscreen View */
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

Example 3

When the page is in full-screen mode, you can also use CSS to set the page style:

/* Safari */
:-webkit-full-screen {
  background-color: yellow;
}
/* IE11 Syntax */
:-ms-fullscreen {
  background-color: yellow;
}
/* Standard Syntax */
:fullscreen {
  background-color: yellow;
}

Try It Yourself

Syntax

HTMLElementObject.requestFullscreen()

Parameters

None.

Technical Details

Return value: No return value.

Browser Support

The numbers in the table indicate the first browser version that fully supports this method.

Note:Some browsers require specific prefixes (see parentheses):

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
71.0
15.0 (webkit)		 79.0
11.0 (ms)		 64.0
9.0 (moz)		 6.0 (webkit) 58.0
15.0 (webkit)