Getting to Full Screen–using the fullscreen APIs.

If you watch movies on Netflix or Amazon, you know how handy the full screen button can be. You can now build full screen capabilities into your apps with a couple of APIs and a few rules.

The full screen API is a collection of methods, properties, events and CSS elements that your app can use to control elements going full screen. It's a W3C and WhatWG standard. However the W3C spec is in working draft, and has been there since 2012, and the WhatWG spec, while it has a current date, pretty much looks the same. We might have to stick with the prefixes for a while.  

This table shows the fullscreen API available in Internet Explorer 11.

More info on these are available at Fullscreen API on MSDN.

Here’s a simple example that has three <divs>, an image, and a video element that you can click and make go full screen. It’s set up for Internet Explorer 11, Google Chrome, Mozilla Firefox, and Opera. Click any element to make it go full screen. Click the element a second time to exit full screen.

The example uses HTML classes to tag the elements that we want to make full screen. A simple loop runs on the collection of elements and creates click events which calls the makeFullFrame() function. The makeFullFrame function sorts out which prefixed version will work, and either requests full frame, or exits full frame.

All browsers have a way for the user to cancel full screen, as that’s one of the security items that the W3C spec calls out. However, I wanted a way to Initially I created separate full screen and exit full screen functions. Clicking the element made it full screen, and a button was supposed to exit full frame. The button used z-order to keep it on the top, but it turned out that didn't work because when you go to full frame, z-order is ignored.

While testing the makeFullFrame function to do double duty, I found I had to cancel bubbling on the click event. This was because anytime I clicked anything other than the first <div>, the click event would keep firing through all the child elements. Since all the elements are nested, that wouldn't work. The solution was to use stopPropagation() on the event on the first pass through.

The makeFullFrame function, other than testing for all the prefixed methods, also checks with the document object to see if an element is full screen. When any element is full screen in a page, the document.fullScreenElement attribute is set. Each browser has their own version of it, so we had to use prefixes there too. If the fullScreenElement is set, we then call the document.cancelFullScreen method. The W3C spec currently specifies exitFullscreen(), (IE uses msExitFullScreen), but the other browsers use a prefixed version of cancelFullscreen.

While each browser uses similar APIs, they don’t all behave the same. The W3C and WhatWG specs don't specify what elements expand to full screen, and which ones just block out the background.

This chart is the result of a quick test of the four browsers. Full screen means the element (img, div, or video) fills the screen completely. Same size means the element (div, img), stayed the same size as a normal view, but the background is blocked out. 

Browser	<div>	<img>	<video>	click to exit
Internet Explorer	Same size	Full screen	Full screen	Yes
Chrome	Same size	Same size	Full screen	Yes
Firefox	Full screen	Full screen	Full screen	Yes but you must accept the Allow option.
Opera	Same size	Same size	Full screen	Yes except on video

What’s interesting is that only Firefox expands a div to display full screen. All other browsers keep div elements the same size. One way around this (In Internet Explorer) is to use CSS and one of the new pseudo classes to fill the screen with the div (if that’s what you want).

Here’s how:

<style>

#test:-ms-fullscreen {
position:absolute;
left:0px;
top:0px;
width: 100%;
height: 100%;
}

</style>

Pretty slick, right? Another full screen pseudo element lets you either set a color or an image for the background for elements that don’t display edge to edge. Here’s how you call that one:

<style>

/* creates a background color of magenta */
#test:-ms-fullscreen::-ms-backdrop {
   background-color: magenta;
}

</style>

<style>

/* creates a background image */
#test:-ms-fullscreen::-ms-backdrop {
   background-image: url("image.jpg");
}

</style>

When you view the example in Internet Explorer, you'll see a magenta background around the <divs>. You can modify the code to use a background-image as well. Unfortunately, not all browsers have jumped on the bandwagon for these two CSS pseudo goodies. 

So that's the fullscreen API in a nutshell. Take a look at the reference pages (linked from the table above, and a conceptual piece we did for IE11 launch. Note that the example is going under a facelift, since there were a bug or two in it. The following example is the "new and improved" version, and mirrors the online example.

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

div:-ms-fullscreen::-ms-backdrop {
background-color:magenta;
}
</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" /> --> <!-- sample server doesn't like this -->
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.exitFullscreen();
} 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>