HTML5 Fullscreen API Example

by skibulk

HTML

<p>
  <label>Click the button below to toggle between fullscreen mode or 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>

CSS

#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; }

JavaScript

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();
    }
  }
}