How to achieve full screen

Learn how to create a full screen window using JavaScript.

Full Screen Window

How to view elements in full screen mode using JavaScript.

Click the button to open the video in full screen mode:

Try It Yourself

Full Screen Video

To open an element in full screen, we use element.requestFullscreen() Method:

Example

<script>
/* 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. */
Note that we must include prefixes for different browsers because they do not yet support the requestFullscreen method */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
</script>

Try It Yourself

Full Screen Document

To open the entire page in full screen, please use document.documentElement instead of document.getElementById("element").

In this example, we also use a closing function to exit full screen:

Example

<script>
/* Get documentElement (<html>) to display the page in full-screen */
var elem = document.documentElement;
/* Full-screen view */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* Exit full-screen */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
</script>

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

Example

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

Try It Yourself

Related Pages

HTML DOM Reference Manual:requestFullscreen() Method

HTML DOM Reference Manual:exitFullscreen() Method

HTML DOM Reference Manual:documentElement Method