By Craig Buckler

How to Use the HTML5 Full-Screen API (Again)

By Craig Buckler

If you don’t like change, perhaps web development isn’t for you. I previously described the Full-Screen API in late 2012 and, while I claimed the implementation details were subject to revision, I didn’t think I’d need a rewrite a year later! This may not be the last, but many thanks to David Storey for highlighting the recent technical transitions…

What is the Full-Screen API?

The API allows a single element to be viewed full-screen. Unlike pressing F11 to force your browser to full-screen, the API is intended for images, videos and games running within a container. When you enter full-screen mode, a message informs the user they can press ESC at any time to return to the page.

The Full-Screen API is now supported by all recent desktop browsers, including IE11. There’s little support on mobile, but those browsers normally run in an almost full-screen view. Unfortunately, we have subtle differences, prefixing requirements, and cross-browser inconsistencies to solve…

The JavaScript API

Assume we have an image with the ID myimage, which we want to view full-screen. The main methods and properties are:

document.fullscreenEnabled (changed)
This property returns true when the document is in a state which allows full-screen mode. It can also be used to determine browser support:

if (document.fullscreenEnabled) { ... }

Earlier implementations had an uppercase ‘S’ in ‘Screen’, and it is still required for Firefox. Adding prefixes results in considerably longer cross-browser code:

// full-screen available?
if (
	document.fullscreenEnabled || 
	document.webkitFullscreenEnabled || 
	document.mozFullScreenEnabled ||
) {

Opera 12 is the only browser not to require prefixes but Opera 15+ uses webkit.

element.requestFullscreen() (changed)
This method makes an individual element full-screen, e.g.


Again, ‘screen’ has switched to lowercase. The cross-browser code:

var i = document.getElementById("myimage");

// go full-screen
if (i.requestFullscreen) {
} else if (i.webkitRequestFullscreen) {
} else if (i.mozRequestFullScreen) {
} else if (i.msRequestFullscreen) {

document.fullscreenElement (changed)
This property returns the current element which is being displayed full-screen or null when not full-screen:

if (document.fullscreenElement) { ... }

‘screen’ is now lowercase. The cross-browser code:

// are we full-screen?
if (
	document.fullscreenElement ||
	document.webkitFullscreenElement ||
	document.mozFullScreenElement ||
) {

document.exitFullscreen (changed)
This method cancels full-screen mode:


Again, we have a lowercase ‘screen’. It was previously named cancelFullScreen, and still is within Firefox. The cross-browser code:

// exit full-screen
if (document.exitFullscreen) {
} else if (document.webkitExitFullscreen) {
} else if (document.mozCancelFullScreen) {
} else if (document.msExitFullscreen) {

document.fullscreenchange event
This event is fired when moving to and from full-screen view. No information is provided by the event but you can determine whether full-screen is enabled by checking whether document.fullscreenElement is not null.

document.addEventListener("fullscreenchange", function() { ... });

The name has not changed, but we require cross-browser prefixes and camel-casing for IE:

document.addEventListener("fullscreenchange", FShandler);
document.addEventListener("webkitfullscreenchange", FShandler);
document.addEventListener("mozfullscreenchange", FShandler);
document.addEventListener("MSFullscreenChange", FShandler);

document.fullscreenerror event
Full-screen can fail. For example, iframes without an allowfullscreen attribute or windowed plug-in content may be blocked. A fullscreenerror event may therefore be fired:

document.addEventListener("fullscreenerror", function() { ... });

The name has not changed, but we require cross-browser prefixes and camel-casing for IE:

document.addEventListener("fullscreenerror", FSerrorhandler);
document.addEventListener("webkitfullscreenerror", FSerrorhandler);
document.addEventListener("mozfullscreenerror", FSerrorhandler);
document.addEventListener("MSFullscreenError", FSerrorhandler);

Full-Screen CSS

We can also influence full-screen styles in CSS…

:fullscreen pseudo class (changed)
You can apply styles to an element or its children when viewed in full-screen mode:

:fullscreen {

This was previously named :full-screen, and still is in Webkit and Firefox. For cross-browser code:

:-webkit-full-screen {

:-moz-full-screen {

:-ms-fullscreen {

:fullscreen {

::backdrop (new)
You can apply a color or image backdrop when an element with a different aspect-ratio is viewed full-screen:

:fullscreen::backdrop {
	background-color: #006; /* dark blue */

The backdrop is a pseudo element behind the fullscreen element but above all other page content. It is supported in IE11, but not Firefox and Opera 12. Chrome, Safari, and Opera 15+ include the backdrop element but do not permit it to be styled. For the moment, you can only target IE11, e.g.

:-ms-fullscreen::-ms-backdrop {
	background-color: #006; /* dark blue */

Styling Differences

In IE11, Firefox, and Opera 12 the full-screen element is set to 100% width and height. Images are therefore stretched and the aspect ratio is ignored. Setting a width and height in IE11 positions a full-screen element to the top-left with a dark backdrop (configurable with ::backdrop). Opera 12 is similar to IE11 but shows a transparent backdrop. Firefox ignores the dimensions. In Chrome, Safari, and Opera 15+ the element is centered with a black backdrop.

If you want some consistency, it’s easy to make the Webkit/Blink browsers stretch like Firefox/IE11:

:-webkit-full-screen {
	position: fixed;
	width: 100%;
	top: 0;
	background: none;

Alternatively, you can make IE11 follow the Webkit/Blink centering:

:-ms-fullscreen {
  width: auto;
  height: auto;
  margin: auto;

This method won’t work in Firefox, which ignores the width and height as mentioned above. To fix it, you’ll need to make the parent element full-screen and apply appropriate sizing as shown in this demonstration.

Ready for Deployment?

The HTML5 Full-Screen API is relatively simple but browser differences result in ugly code, and there’s no guarantee it won’t change again. The situation will improve so it may be preferable to invest time and effort in other features until the API becomes more stable.

That said, full-screen can be essential for HTML5 games and video-heavy websites. If you don’t want to maintain code yourself, consider using a library such as screenfull.js which smooths over the cracks. Best of luck!

  • That’s really cool how you can make just a particular element fullscreen and style it with pseudo-classes. No need for lightbox plug-ins!

  • Alex Hall

    So, unfortunately what you are saying here is that this API is simply not ready for a production environment. Shame as it’s really handy for certain sites like those you mention.

    • Craig Buckler

      I wouldn’t go that far. It’s certainly usable and, if full-screen is essential for your app, there’s no harm in implementing the code. Just be aware that it may change.

  • Dániel Sebestyén

    Nice article! I’m having an issue on chrome 33.x.. We’ve ajaxified a site and while navigating in the site in chrome it always exit from fs mode… I’ve tried if not pushing state in the browser and when href, wont change in chrome its ok. Btw, we have to notify user where it is altough url is not related to every user. Hope this bug soon will be fixed in chrome.

  • Jürgen Wothke

    Thanks for the infos. Unfortunately it seems that the fullscreen API miserably falls short in the most basic scenario:

    While it is obviously posssible to add my own additional “go fullscreen” button or handle F11-key presses to invoke the respective APIs, i.e. it seems to be impossible to programatically intercept and handle the case where the user choses to switch via the browsers built-in “view page in fullscreen” function (see respective item in browser’s top level menu). Sadly the respective “fullscreenchange” DOES NOT trigger any notification event and it seems to be impossible to consistantly override the browser’s built-in “fullscreen” implementation using the APIs :-(

  • M S

    How do i “press esc at any time to exit”, when there is no keyboard?
    I have this problem every day.

    • brianm101

      You make sure voice recognition is on and curse quietly!
      Throwing the tablet through a window (open or closed) apparently works as well……

  • Devendra Dandu

    When you enter full-screen mode, a message informs the user they can press ESC at any time to return to the page….how to prevent this auto generated message every time…

  • brianm101

    Thanks for the rewrite! But what is it with people responsible for web standards/API, they appear to be a bunch of bumbling idiots, and seems to have been the case from day zero!

    How hard can it be to get specifications right? Why change something because you don’t like the case of a character in a call!

    Yes there are problems with other software tool specifications such as c++ or c# but nothing compared to the incompetence of web standards, which is probaby a misnomers!

    Look forwards to your next article as they change the spec again!

  • Dawid Ogiegło

    Just on line, go to fullscreen:

    (i.requestFullscreen || i.webkitRequestFullscreen || i.mozRequestFullScreen || i.msRequestFullscreen || function(){}).call(i)

    • noni

      revert me with some positive respose When you enter full-screen mode, a message informs the user they can
      press ESC at any time to return to the page….how to prevent this auto
      generated message every time…

  • taro

    not support on android browser

  • Thanks for this tutorial. Very useful :)

  • kkelvekar

    Thanx..Very useful article..

  • sapristi

    is it too hard to put a demo?

  • Roman

    I tried all the thing in this page. Still I can’t find a way to get information if the screen is in the full mode

  • Mikawelll

    Is there any easy way to strech elements while keeping aspect ratio ? The problem with width:100% & height:100% is that you loose the aspect ratio.

    • You may use object-fit or background-size: contain if it’s an image

  • Simone Scigliuzzi

    Very usefull article!
    Here’s my code to check the fullscreen status:

    function isFullScreen()
    { // returns true if document is currently FullScreen
    return (FullScreenEl() != undefined);
    function FullScreenEl()
    return document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||

Get the latest in JavaScript, once a week, for free.