How to Use the HTML5 Full-Screen API

Update: This article is now outdated. Please see the updated version, How to Use the HTML5 Full-Screen API (Again).

Flash has offered a full-screen mode for many years but, until now, browser vendors have resisted the feature. The main reason: security. If you can force an app to run full-screen, the user loses their browser, taskbar and standard operating system controls. They may not be able to close the window or, worse, nefarious developers could emulate the OS and trick users into handing over passwords, credit card details, etc.

At the time of writing, the HTML5 full-screen API has been implemented in Firefox, Chrome and Safari. Mozilla provide good cross-browser details but it’s worth noting that the specifications and implementation details are likely to change.

Unlike pressing F11 to make your browser go full-screen, the API sets a single element full-screen. It’s intended for images, videos and games using the canvas element. Once an element goes full-screen, a message appears temporarily to inform the user that they can press ESC at any time to return to windowed mode.

The main properties, methods and styles are:

element.requestFullScreen()
Makes an individual element full-screen, e.g. document.getElementById(“myvideo”).requestFullScreen().

document.cancelFullScreen()
Exits full-screen mode and returns to the document view.

document.fullScreen
Returns true if the browser is in full-screen mode.

:full-screen
A CSS pseudo-class which applies to an element when it’s in full-screen mode.

Vexing Vendor Prefixes

Don’t bother trying to use these API names. You’ll require vendor prefixes for BOTH the CSS and JavaScript properties:

Standard Chrome/Safari Firefox
.requestFullScreen() .webkitRequestFullScreen() .mozRequestFullScreen()
.cancelFullScreen() .webkitCancelFullScreen() .mozCancelFullScreen()
.fullScreen .webkitIsFullScreen .mozfullScreen
:full-screen :-webkit-full-screen :-moz-full-screen

There’s no support in Internet Explorer or Opera yet, but I would suggest you use the ‘ms’ and ‘o’ prefixes for future proofing.

I’ve developed a function in the demonstration page which handles the prefix shenanigans for you:


var pfx = ["webkit", "moz", "ms", "o", ""];
function RunPrefixMethod(obj, method) {
	
	var p = 0, m, t;
	while (p < pfx.length && !obj[m]) {
		m = method;
		if (pfx[p] == "") {
			m = m.substr(0,1).toLowerCase() + m.substr(1);
		}
		m = pfx[p] + m;
		t = typeof obj[m];
		if (t != "undefined") {
			pfx = [pfx[p]];
			return (t == "function" ? obj[m]() : obj[m]);
		}
		p++;
	}

}

We can then make any element viewable full screen by attaching a handler function which determines whether it’s in full-screen mode already and acts accordingly:


var e = document.getElementById("fullscreen");

e.onclick = function() {

	if (RunPrefixMethod(document, "FullScreen") || RunPrefixMethod(document, "IsFullScreen")) {
		RunPrefixMethod(document, "CancelFullScreen");
	}
	else {
		RunPrefixMethod(e, "RequestFullScreen");
	}

}

The CSS

Once the browser enters full-screen mode you’ll almost certainly want to modify the styles for the element and it’s children. For example, if your element normally has a width of 500px, you’ll want to change that to 100% so it uses the space available, e.g.


#myelement
{
	width: 500px;
}

#myelement:full-screen
{
	width: 100%;
}

#myelement:full-screen img
{
	width: 100%;
}

However, you cannot use a list of vendor prefixed selectors:


/* THIS DOES NOT WORK */
#myelement:-webkit-full-screen,
#myelement:-moz-full-screen,
#myelement:-ms-full-screen,
#myelement:-o-full-screen,
#myelement:full-screen
{
	width: 100%;
}

For some bizarre reason, you must repeat the styles in their own blocks or they won’t be applied:


/* this works */
#myelement:-webkit-full-screen	{ width: 100% }
#myelement:-moz-full-screen		{ width: 100% }
#myelement:-ms-full-screen		{ width: 100% }
#myelement:-o-full-screen		{ width: 100% }
#myelement:full-screen			{ width: 100% }

Weird.

View the demonstration page in Firefox, Chrome or Safari…

The technique works well. The only issue I’ve discovered concerns Safari on a two-monitor desktop — it insists on using the first monitor for full-screen mode even if the browser is running on the second screen?

While it’s possibly a little early to use full-screen mode, games developers and video producers should keep an eye on progress.

If you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like HTML5 & CSS3 For the Real World.

Comments on this article are closed. Have a question about HTML5? Why not ask it on our forums?

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • http://walkleftstudios.com Luke Madhanga

    Hey, nice tut mate.

    A man once said, a good programmer writes code Humans can read. Although the runPrefixMethod thing looks absolutely awesome and an absolute time saver, Humans won’t understand that. Can I suggest you add some comments or you use long variables.

    Nice One Mate, Luke Madhanga – Walk Left Studios

  • Steve

    Worked in Chrome, but not Firefox or Safari.

  • http://www.mobilevertising.com Muhamad Abdul Hay

    Nice works!

    It works on my Safari & Chrome browser. Thank you for sharing the RunPrefixMethod function with us.

    Thanks again!

  • Francesco

    Love it. I noticed Facebook started to use it a couple of weeks ago, but this article makes it REALLY clear (it’s really very simple, actually).

    One thing I think it’s worth it to point out is that the element you click doesn’t necessarily need to be the one that goes fullscreen… it’s kind of obvious, but since in the example it’s the same element somebody might think it MUST be the same! :-)

  • Jason

    Do people ever actually use full screen, I mean people, not your weird Linux friend…

  • http://www.interactivewebzone.com.mx Luis Alberto Hernandez

    Nice !!! working fine in Chrome but in Chromium not working :(

  • http://thoughtrefinery.com/ Nick Ciske

    Safari 5.1.5 handled my dual monitor set-up just fine — the example went full screen on the same monitor the browser was on.

    • http://thoughtrefinery.com/ Nick Ciske

      Things got weird when my browser spanned both monitors though… the image appeared full screen on the main monitor, and extended part way onto the second monitor (by as much as the browser extended into that screen).

  • http://www.catchlight.co.nz Brockdin Barr

    I can see this being really awesome on photo galleries, especially if gestures were added for mobile devices.

  • Craig Rogers

    Didn’t work on my ipad. Anyone else have the same problem?

  • Berra

    The demo image is in 4:3 format.
    In fullscreen mode it stretches to fill my 16:9 screen.
    That is not very cool.
    Why doesn’t it letterbox and keep the w/h ratio?

    • Berra

      Correction:
      The image fills the width of the screen, but it’s not stretched out of proportion.
      Instead the bottom part of the image is cropped.
      [Firefox 11.0 & latest Chrome]

      Is there a way to fit the whole image in fullscreen?

      Thx

  • Mike

    It’s working fine with the photo.
    How can I view the page in fullscreen, not only the photo? Thanks a million!

  • http://N/A manoj

    i was searching this code and css

    thank u very much…..

    :)

  • Francesco

    One interesting thing I noticed while using this in “real life”.

    In Firefox, if I use the CancelFullScreen method on an actual link (as in, I’m in full-screen mode and I have a link to a different page that I don’t want to show in full-screen mode so I need to exit *and* change url), the first click will only exit full-screen mode and it needs a second click to actually change page. In Chrome this doesn’t happen and one click is enough.

    Adding a simple location.href = $(this).attr(“href”) (if using jQuery) will work, anyway.

    It seems that CancelFullScreen, if actually used to exit full-screen mode, doesn’t let the default action propagate.

  • http://anthonygoodley.com/ Anthony Goodley

    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. Would letterboxing be so hard for the browsers to implement? Makes me sad as this is pretty cool and easy to implement.

  • http://sindresorhus.com Sindre Sorhus

    I made a simple wrapper for the Fullscreen API to fix some inconsistencies in the different implementations and hide away the prefixes.

    https://github.com/sindresorhus/screenfull.js

    Let me know if you find it useful :)

  • http://mythuat24h.net/ jno manh

    How can I view the page in fullscreen, not only the photo? Thanks a million!

  • noypiscripter

    “For some bizarre reason, you must repeat the styles in their own blocks or they won’t be applied:”

    I think all browsers behave like that. If there are multiple CSS rules and one of the selectors in a rule are not supported by a browser, the styles will not be applied at all for that browser.

    For example, we all know that :last-child is not supported in IE8. If you do the CSS rules like this, the .lastchildforIE8 selector will not be applied in IE8 even if the last li has that class.

    ul li.lastchildforIE8, ul li:last-child {
    color:red;
    }

  • Kurt Kemple

    Nice post, you write great content, keep it up. I just used a version of this code on a project.

  • Ovi

    Can I have the application in the browser on the first screen and display the fullscreen content on a second screen? Also, can I dinamycally change the text in the full screen application without a video?