Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

exitFullscreen method

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

IE11

 

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 VersionRecommended Usage
Prior to Internet Explorer 11not implemented
IE11msExitFullscreen
Microsoft Edge and beyondexitFullscreen

 

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.


<!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>


See also

document
msRequestFullscreen
Fullscreen example

 

 

Show:
© 2015 Microsoft