Toggling Fullscreen Mode Using the HTML5 Fullscreen API

The Fullscreen API allows a web page or an element to be viewed in fullscreen mode, hiding all browser user interface and other applications from the screen. You can use this API to bring videos, images, and other content to a user’s full attention.

Simply call the requestFullscreen() method on the element that you’d like to present in fullscreen mode (such as a <img>, for example). Users can easily leave fullscreen mode at any time by pressing ESC. To get out of fullscreen mode programmatically, call the exitFullscreen() method.

Some browsers still prefix the API with a unique identifier; Trident uses ms, Gecko uses moz, and WebKit uses webkit. It’s a good idea to have a single function that requests fullscreen mode across all prefixes, like the examples shown here.

Demo

Source Code

<style>
#exampleImage { cursor:zoom-in; }
#exampleImage:-webkit-full-screen { cursor:zoom-out; }
#exampleImage:-moz-full-screen { cursor:zoom-out; }
#exampleImage:-ms-fullscreen { cursor:zoom-out; }
#exampleImage:fullscreen { cursor:zoom-out; }
</style>

<p>
  <label>Click the button below to toggle between fullscreen mode and windowed mode for this page.</label><br>
  <button id="btnFullscreen" type="button">Toggle Fullscreen</button>
</p>
<p>
  <label>Click the image below to view it in fullscreen mode, click the image again to exit fullscreen mode.</label><br>
  <img id="exampleImage" src="https://ununsplash.imgix.net/photo-1429760575641-c599a08c3541?fit=crop&fm=jpg&q=75&w=1024">
</p>

<script>
function toggleFullscreen(elem) {
  elem = elem || document.documentElement;
  if (!document.fullscreenElement && !document.mozFullScreenElement &&
    !document.webkitFullscreenElement && !document.msFullscreenElement) {
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

document.getElementById('btnFullscreen').addEventListener('click', function() {
  toggleFullscreen();
});

document.getElementById('exampleImage').addEventListener('click', function() {
  toggleFullscreen(this);
});
</script>

Fullscreen CSS

We can use the :fullscreen CSS pseudo-class to style any element that’s currently being displayed in fullscreen mode. The W3C proposal uses the single word :fullscreen, that is without a dash, but both the Webkit and Gecko experimental implementations use a prefixed variant with two words linked by a dash: :-webkit-full-screen and :-moz-full-screen, respectively. See the example below for cross-browser code.

#exampleImage:-webkit-full-screen { cursor:zoom-out; }
#exampleImage:-moz-full-screen { cursor:zoom-out; }
#exampleImage:-ms-fullscreen { cursor:zoom-out; }
#exampleImage:fullscreen { cursor:zoom-out; }