Using the Fullscreen API in web browsers
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:
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 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.
I really wonder the CSS extension is a pseudo-class and not a new Media Query…
Daniel,
That’s an excellent question! Do you know any more about the reasoning behind it?
There is a typo in the <noscript> version of your site:
if (docElm.requestFullscreen) {
docElm.requestFullScreen();
}
should be with a lowercase s both times of course.
Neil,
Fixed. Thanks for the heads-up!
[…] Full ScreenUsing The Fullscreen API In Web Browsers [ robertnyman ] […]
[…] ho trovato qualcosa a questo indirizzo http://robertnyman.com/2012/03/08/us…-web-browsers/, ma purtroppo funziona solo in Chrome. Comunque sto cercando qualcosa dello stesso tipo ma che […]
I made a simple wrapper for the Fullscreen API to smooth out the prefix mess and fix some inconsistencies in the different browser implementations.
https://github.com/sindresorhus/screenfull.js
Sindre,
Cool, thanks for letting me know!
How do I make the document.documentElement scrollable?
Firefox seems to have disabled this by default.
Do you have an idea?
Peter,
It’s a great question. I’m looking into it right now.
Peter,
It is a scrolling bug and will be fixed.
Whether it’ll work in IE browser? If yes, then what is the solution,please mention.
Thanks in advance.
Minati,
You need to ask Microsoft about that. 🙂
If they decide to implement it, it will be in there.
OK, do you know when the conformant behavior will arrive in Nightly?
Thusfar is hasn ‘t been implemented yet.
Thanks for looking into this.
Peter,
Not sure. Please follow the corresponding bug for scrolling fullscreen.
Once you’re in Full screen, then click a link to say, “page2.html”, the window doesn’t remain in Full screen.
Morpheus,
That’s because of security reasons, to avoid phishing and similar.
Which css rule must I add to get scrollbars on the body element or any other element which enters fullscreen?
Peter,
Its now fixed, according to the bug.
Necessary CSS, at least for Firefox itself, is through the :root pseudo-class.
You demo has a little bug!When i am in FullScreen.I refresh the page , the Fullscreen state in the page is still ” I am not FullScreen”.
buddyfox,
That’s the text, but when you refresh the page – for security reasons – you are also taken out of the fullscreen state by the web browser. So, the text is correct (tested in Firefox and Google Chrome).
Hi, I see this code very useful, but, Is there any way to implement without click a button?, fo example, when the page loads, it turn into fullscreen.
Isaac,
For security reasons, that’s not allowed. It has to be a user-initiated action.
when i refresh the page ,the full screen is lost .
I want full screen every time.
That won’t work, for security reasons.
[…] http://robertnyman.com/2012/03/08/using-the-fullscreen-api-in-web-browsers/ […]
can i call fullscreen function on website load event?.. i checked but it does not work..
This has been answered in multiple comments, just above your comment.
hi the style d’ont work for me i want to make my div height: 100% and width:100% please i need help very quickly