HTML5 Zone is brought to you in partnership with:

Robert has been working with web developing, mostly interface coding, since 1998. His biggest interests lies in HTML, CSS and JavaScript, where especially JavaScript has been a love for quite some time. He regularly blogs at http://www.robertnyman.com about web developing, and is running/partaking in a number of open source projects (http://code.google.com/u/robnyman/). Robert is a DZone MVB and is not an employee of DZone and has posted 58 posts at DZone. You can read more from them at their website. View Full User Profile

A Pragmatic Introduction to the HTML5 Fullscreen API

03.12.2012
| 27643 views |
  • submit to reddit

This post was originally published for Mozilla Hacks.

One thing which has been very important when it comes to creating special end user experiences have been the ability to show something fullscreen, effectively hiding all the other content etc.

Remember when web sites gave you instructions how to configure your web browser with hiding toolbars and more, just to get a slightly better user experience? Or maybe it’s just me… :-)

Either way, some time ago we got fullscreen support in web browsers where the user could choose to view the current web site in fullscreen. That’s all good and well, but as an extension to that, as web developers we want to be able to trigger that. Either for the entire web site or just a specific element.

And now we can!

Requesting fullscreen

We now have access to a method called requestFullScreen, so far implemented in Firefox, Google Chrome and Safari. Therefore, to make it work at the moment, we need this code:

var docElm = document.documentElement;
if (docElm.requestFullscreen) {
    docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
    docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
    docElm.webkitRequestFullScreen();
}

Please note that the Fullscreen standard in the W3C specification uses a lowercase ‘s’ in all methods, whereas Firefox, Google Chrome and Safari use an uppercase one.

What the code above does is just getting a reference to the documentElement and request for it to be displayed fullscreen. Naturally, you could also make just a certain element fullscreen, for instance, a video, with the same method called for the element you wish.

Cancelling fullscreen

If you want to cancel the fullscreen state, you need to call it on the document element:

if (document.exitFullscreen) {
    document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
}

Note here that W3C has decided to call it exitFullscreen, but in all existing web browser implementations it’s about cancelling the state.

Detecting fullscreen state change

The user could, for instance, exit fullscreen, something that might be good for you to know. For that we have a fullscreenchange event, that you can apply both to the element that requested fullscreen, but also to the document. Then we just detect the fullscreen state and take act accordingly, like this:

document.addEventListener("fullscreenchange", function () {
    fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";
}, false);

document.addEventListener("mozfullscreenchange", function () {
    fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";
}, false);

document.addEventListener("webkitfullscreenchange", function () {
    fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
}, false);

Styling fullscreen

In CSS, we get a number of pseudo-classes for styling fullscreen elements. The most reliable one is for full-screen and automatically gets triggered when the document/element is in fullscreen mode:

html:-moz-full-screen {
    background: red;
}

html:-webkit-full-screen {
    background: red;
}

html:fullscreen {
    background: red;
}

Notice here that the W3C approach doesn’t use a hyphen between the word ‘full’ and the word ‘screen’.

It should also be added that Firefox is the only web browser that applies a width and height of 100% to the element that is requesting fullscreen, since we believe that is the desired behavior. This can of course be overridden with the above CSS.

Full screen with key input

For security reasons, most keyboard inputs have been blocked in the fullscreen mode. However, in Google Chrome you can request keyboard support by calling the method with a flag:

docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);

This does not work in Safari, and the method won’t be called.

With Firefox, we are discussing and looking into various ways of how we we could add keyboard input support without jeopardizing the end user’s security. One suggestion, that no one has implemented yet, is the requestFullscreenWithKeys method, which in turn would trigger certain notifications for the user.

Web browser support

This feature is currently available in Firefox 10 and up. It has also been available in Google Chrome since version 15 and Safari since 5.1.

Play with fullscreen!

I have a Fullscreen API demo available for you to play with, and all the code is available in the Fullscreen repository on GitHub.


 

 

 

Published at DZone with permission of Robert Nyman, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Lubos Pochman replied on Wed, 2012/10/31 - 6:50pm

This works (including the demo) only for document.documentElement in Chrome. Works for both document.documentElement and document.getElementById in Mozilla, doesn't work at all in IE9.

Palukuru Vij replied on Sun, 2013/11/17 - 8:23am

Thanks for this article. I will implement this for my railway pnr status website: pnr status

Lisa Coffey replied on Fri, 2014/07/11 - 5:34am

 

Worked perfectly in Chrome 18.0.1025.162 besides the stretch to fit issues others mentioned.

Fail in Firefox 8.0.

Worked in Firefox 11.0 after upgrading. Also uses the evil stretch to fit method for the image.

Fail in Opera 11.52. and Opera 11.62

Fail in Internet Explorer 9.0.8112.16421.

Worked in Safari 5.1.2 (7534.52.7) BUT Safari did not either ask permission to display the picture in full screen mode or give a message informing that the ESC key can be used to exit full screen mode. Safari also stretched to fit the image. Very bad in my opinion.

Using Windows 7 Home Premium OS.

Until most, if not all, of these browsers can all handle the HTML5 full screen API without resorting to stretch to fit behavior I can't see using this in the photo gallery script I'm making for my website . Would letterboxing be so hard for the browsers to implement? Makes me sad as this is pretty cool and easy to implement.

Shoeb Siddique replied on Sun, 2014/07/13 - 4:32pm

 I was looking for this information and finally i got it. You have explained it beautifully. Awesome work bro, i loved to implement it on my pnr status website.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.