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.
| Member (W3C vesion) | Type | Description |
| msRequestFullscreen (requestFullscreen) | Method | Requests full-screen display of an image, video, or other element. |
| msExitFullscreen (exitFullscreen) | Method | Returns an element to its original size from full-screen mode. |
| msFullscreenElement (fullscreenElement) | Property | Returns the top or current element that's being displayed in full-screen mode. Otherwise it returns undefined. |
| msFullscreenEnabled (fullscreenEnabled) | Property | Returns true if a document lets elements be displayed in full-screen mode. Otherwise it returns false. |
| MSFullscreenChange (fullscreenChange) | Event | Fires when an element is displayed in full-screen mode, or when it exits full-screen mode. |
| MSFullscreenError (fullscreenError) | Event | Fires when a full-screen display is requested of an element, but this request can't be fulfilled. |
| allowfullscreen (same) | Attribute | Enables an iframe's content to display in full-screen mode. If missing, only the iframe (and not the content within the frame) can go to full-screen mode. |
| : -ms-fullscreen (:fullscreen) | Pseudo class | Enables you to set specific CSS properties based on whether an element is in full-screen mode or not. |
| :: -ms-backdrop (::backdrop) | Pseudo element | Enables you to set the background properties when an element is displayed in full-screen mode. |
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>