fullscreenElement 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.

Syntax

JavaScript


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.

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

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

For improved compatibility with legacy sites, webkitFullscreenElement is also supported as an alias of fullscreenElement 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. It also provides prefixed APIs for other browsers. 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>

fullscreenElement property

Syntax

Property values

Remarks

Examples

See also