msFullscreenElement property

Returns the current full-screen element. If there's more than one element in the full-screen mode element stack, then this property returns the top element.

This property is read-only.

IE11

 

Syntax


element = document.msFullscreenElement;

Property values

Type: Element

Element that's being displayed in full-screen mode.

Remarks

The CSS z-order doesn't apply to the full screen element stack.

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. It also provides prefixed APIs for other browsers. 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
msExitFullscreen
msRequestFullscreen
Fullscreen example

 

 

Show:
© 2014 Microsoft