exitFullscreen method

Causes an element to stop being displayed in full-screen mode.

Syntax

document.exitFullscreen();

Parameters

This method has no parameters.

Return value

This method does not return a value.

Remarks

As of Microsoft Edge, the experimental "ms" prefix was removed from msExitFullscreen. The recommended usage is as follows:

IE Version	Recommended Usage
Prior to Internet Explorer 11	not implemented
IE11	msExitFullscreen
Microsoft Edge and beyond	exitFullscreen

For improved compatibility with legacy sites, webkitExitFullscreen is also supported as an alias of exitFullscreen in Microsoft Edge

Examples

This example uses generic images and videos, which you can replace with your own. When you click a video, image, or color box, it will try to display full screen. You'll get a prompt asking if you want to keep it full screen. See the live demo.

HTML


<!DOCTYPE html>
<html >
<head>
    <title>Fullscreen API test</title>
   <style>
      video {
        /* Push video element over */
        position:relative;
        left: 350px;
      }
      #div1 {
        background-color:green;
        width:800px; 
        height:500px;
      }
      #div2 {
        background-color:yellow;
        width:700px; 
        height:400px;
      }
      #div3 {
        background-color:red;
        width:300px; 
        height:300px;
      }
    </style>
 
</head>
<body >
  <div id="div1" class="fullScreen" > Div1                
        <div id="div2" class="fullScreen" > Div2        
           <video class="fullScreen" controls="controls" loop="loop" autoplay="autoplay" width="300">
             <source src="demo.mp4" type="video/mp4" /> <!-- support for IE, Firefox, or Chrome -->
             <source src="demo.ogv" type="video/ogg" />
             <source src="demo.webm" type="video/webm" /> 
             Sorry, video isn't supported
           </video>          
           <div id="div3" class="fullScreen" > Div3
             <img class="fullScreen" src="image.jpg"  /> 
           </div>
        </div>     
    </div>
   <script>

    // create click events for all the elements based on class.
    var fsClass = document.getElementsByClassName("fullScreen");
    for (var i = 0; i < fsClass.length; i++) {
      fsClass[i].addEventListener("click", function (evt) { makeFullScreen(evt); }, false);      
    }
    
    function makeFullScreen(evt) {
      // Test for each of the supported versions of full screen APIs and call 
      // either requestFullscreen or cancelFullScreen (or exitFullScreen)
      //  Structure: 
      //  Does the incoming target support requestFullscreen (or prefaced version)
      //  if (there is a fullscreen element) 
      //      then cancel or exit
      //  else request full screen mode

      var divObj = evt.target;  //  get the target element

      if (divObj.requestFullscreen)   
        if (document.fullScreenElement) {
            document.cancelFullScreen();       
        } else {
          divObj.requestFullscreen();
        }
      else if (divObj.msRequestFullscreen)
        if (document.msFullscreenElement) {
            document.msExitFullscreen();
          } else {
          divObj.msRequestFullscreen();
        }
      else if (divObj.mozRequestFullScreen)
        if (document.mozFullScreenElement) {
            document.mozCancelFullScreen();
        } else {
          divObj.mozRequestFullScreen();
        }
      else if (divObj.webkitRequestFullscreen)
        if (document.webkitFullscreenElement) {
            document.webkitCancelFullScreen();
          } else {
          divObj.webkitRequestFullscreen();
        }
      //  stop bubbling so we don't get bounce back
      evt.stopPropagation();

    }

  </script>
</body>
</html>