Using the Fullscreen API in web browsers

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:


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:


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("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:-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 beta, but it’s due to land in the official release of Firefox, version 10, tomorrow! 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.

View full post on Mozilla Hacks – the Web developer blog

Tagged on: , ,

6 thoughts on “Using the Fullscreen API in web browsers

  1. André Luís

    Cool writeup, Rob! And great to follow your writings here too, on the Mozilla site of things.

    Keep it up! And thanks. The support is already maturing nicely… so in the next few months this should become more common place.

  2. marcusklaas

    Also, is it required that this fullscreen code is excecuted in an eventListener? Does not seem to work when I execute it outside without a user generated event..

  3. marcusklaas

    Cool! It works nicely in Chrome indeed. Question: does this also work on devices like iPad with iOS 5?

  4. James

    Two questions:

    1) Does the browser treat Fullscreen that came via a web page trigger any differently than if a user just went to the toolbar View > Full Screen?

    2) I’m not sure I understand the limiting of key strokes while in full screen mode. If you fullscreen a web page that has a text area in it, does that mean I can’t type in it? According to the MDN documentation for full screen (https://developer.mozilla.org/en/DOM/Using_full-screen_mode) “any alphanumeric keyboard input while in full-screen mode causes a warning message to appear”. I just full screened this web page (View > Full Screen) and am typing this message, yet do not see any ‘warning message’. Should I see one? Perhaps the answer to this is related to my first question.

    Thanks!

  5. Robert Nyman

    Indeed, it opens up a lot of interesting options! And thanks!
    Now go install a web browser version that you can try these in. 🙂

  6. Rodrigo Ayala

    Excellent!, I didn’t know anything about this feature, a great functionality to show fullscreen videos or play cool games using the whole screen.

    Note: the demo doesn’t work for me, but I didn’t read the part where you say that this will be supported since Firefox 10 (and I have FF9) xD…

    Great post Robert!, thanks a lot 🙂

Leave a Reply