Fullscreen HTML5 video

In preparation for a talk I’m doing at Web Directions South I needed to be able to put video into fullscreen mode from within my HTML based slides. In order to do this I imagined I would of needed to use flash but thankfully Webkit nightly, Chrome dev and Firefox nightly have added the ability to put HTML5 videos, and other elements, into fullscreen mode using javascript. The FullScreen API now updated to point to official editor draft, thanks Hans!.

Fullscreen, finally

HTML5 video has come a long way but still lacks consistent codec support and the ability to go fullscreen, until now of course.

As you can see I’ve created a very simple demo showing HTML5 video in full screen, make sure you’re using Chrome dev, webkit or firefox nightly. In Firefox you’ll need to enable it in about:config, search for “full-screen-api.enabled” and set it to true. Webkit nightly will require the “–enable-fullscreen-api” flag when launching. Chrome dev has it enabled by default.

API differences

If you poked around the source you’ll notice that Webkit uses slightly different method to trigger fullscreen. Turns out webkit only uses a different API for videos but uses the same as firefox for all other elements. Mozilla initially created a draft spec for fullscreen elements but Webkit decided to change the name slightly, for the better I think.

var video = document.getElementById("video");
 
// Mozilla
video.mozRequestFullScreen();
 
// Webkit for video elements only
video.webkitEnterFullScreen();

As with entering fullscreen you can also cancel it. Using the cancelFullScreen method will exit any element currently in fullscreen mode.

// Mozilla
video.mozCancelFullScreen();
 
// Webkit
video.webkitCancelFullScreen();

Fullscreen CSS, DOM properties and events

Along with the ability to force a video into fullscreen there is also some CSS pseudo-classes and DOM properties.

video:-webkit-full-screen     { max-height: 100%; }
video:-moz-full-screen        { max-height: 100%; }

The FullScreen API adds one notable pseudo-class that lets you change the element when it’s in fullscreen mode. A good example is if you had a max-height set on your video element and you triggered fullscreen mode you can then reset the max-height to be 100%.

If you want to do something when the browser is in full screen mode the document object gets the fullScreen property. This is slightly different in webkit compared to mozilla.

// Mozilla
document.mozFullscreen;
 
// Webkit
document.webkitIsFullscreen;

As you can see mozilla doesn’t include the Is in the property like webkit does. So we have this boolean property on the document how do we know when to check it? Well luckily the API also includes an event that triggers called [moz/webkit]fullscreenchange.

video.addEventListener("mozfullscreenchange",function(){
    console.log(document.mozFullScreen);
}, false);

video.addEventListener("webkitfullscreenchange",function(){
    console.log(document.webkitIsFullScreen);
}, false);

The event will trigger whenever fullscreen mode changes so you can then check the document fullScreen property if it’s currently in or out of fullscreen mode. The event is currently prefixed in both Webkit and Firefox.

Some quirks

API differences aside the mozilla spec highly recommends that hitting the Esc key will exit the browser from fullscreen, unfortunately Chrome doesn’t adhere to this (see bug) (Bug has been fixed for linux/windows still needs a fix for mac). If you’re on OSX Lion it will put the browser into full screen mode so to exit you have to hit Cmd+Shift+F on windows F11.

API changes are almost guaranteed. There is already a webkit bug which mentions changing to “Fullscreen” rather than “FullScreen” but for now both are enabled.

UPDATE: There is an official editor draft of the spec and looks like Mozilla’s implementation will be the final one. The API is slighty changing to make FullScreen lowercase in all API calls except where it isn’t the first word e.g. requestFullscreen.

Much more than just video

I only wanted to cover video elements in this article but the API allows fullscreen on almost any element, this functionality is much more limited in Webkit. Webkit uses webkitRequestFullscreen for all other elements. Using the allowfullscreen attribute on iframes for example will allow youtube or vimeo to put their iframe embeds into fullscreen mode. Firefox works with more elements in their nightly build e.g. if you add the mozallowfullscreen attribute to the iframe you can put it into fullscreen mode.

There is also some security restrictions around key events and characters allowed.

Further reading

Short URL: http://cssn.in/ja/035

 

Post filed under: javascript.

Skip to comment form.

  1. John Dyer says:

    Thanks for the great writeup!

    On webkit, there are actually two different fullscreen methods. video.webkitEnterFullScreen(); (in your example) was introduced for iOS and Safari 5 and only works on videos, while video.webkitRequestFullScreen(); is for any element including [div] and [iframe] and was introduced in Safari 5.1.

    I have both webkit methods working on http://mediaelementjs.com/ and I’ll get Firefox working in a few days. Thanks again for the demo.

  2. Ryan Seddon says:

    @John Dyer -

    Oh awesome I didn’t even realise that, will update the article when I get a chance. Thanks for the info.

  3. As it turns out there’s a W3C Fullscreen API spec as of today.

  4. I tried the demo and couldn’t see the fullscreen effect. I’m on Chrome 14.0.835.202 m Windows.

  5. Ryan Seddon says:

    @Kamilo Cervantes -

    You need Chrome dev, so version 16 for it to work.

  6. I tried the demo and couldn’t see the fullscreen effect. says:

    I tried the demo and couldn’t see the fullscreen effect. I’m using Firefox.

  7. Ryan Seddon says:

    You need to use Firefox nightly in order for the fullscreen demo to work, says so in the opening paragraph of the article.

  8. I think that line 64 of the ‘live-demo’ has to be:
    if(!fullscreenvideo) { … }
    istead of
    if(!fullscreen) { … }
    and accordingly you need the same control on ‘fullscreenother’.

  9. Ryan Seddon says:

    @Alberto

    The code is correct, the fullscreen variable either returns false or the elements prefixed fullscreen method.

  10. Hi,

    good article thanks for sharing buddy.

  11. Marco says:

    Don’t know how useful this is if there are certain requirements for it to work on Chrome and Firefox?

  12. hengkiardo says:

    not work in firefox. :(
    but it awesome code

  13. PiJoKra says:

    It doesn´t work here neither (I am using FireFox 8.0)
    In Google Chrome it works…

  14. Ryan Seddon says:

    @PiJoKra

    As stated in the article you need to enable it in Firefox nightly, has since shipped in v9, in the about:config settings page.

  15. 1st, thank’s. An A1 post. 2 small spelling errors:
    In this post: document.mozFullscreen;
    Correction: document.mozFullScreen;
    In this post: document.webkitIsFullscreen;
    Correction: document.webkitIsFullScreen;

  16. irene says:

    hi! i found your post very useful. i tried integrating this though in an ebook (epub format) but the ibooks (ipad ebook reader) is throwing an error (startTag invalid element name) on the line where the for loop starts. can someone lead me on this please? thanks in advance!

  17. izor says:

    how to disable control in full screen mode on chrome
    because in normal form, I disabled the control,

  18. I created a simple wrapper for the Fullscreen API to fix some differences between the implementations and abstract away the prefixes.

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

  19. PikachuEXE says:

    Great!
    Just what I want to know for my extension -w-

  20. sleo says:

    Nice Article, i just try find the best method for this “fullscreen problem”, but i see after few pages is not so easy what I thought earlier about smooth tag… So in others words there is no no-script method to do that for firefox, opera, ie9 ? A sad thing is – why “fullscreen” mode/control is not a part of “preload controls…” Cheers’

  21. Stephen Mathieson says:

    There’s a polyfil unifying the browser prefixed API: https://github.com/neovov/Fullscreen-API-Polyfill

    Using it, you’re able to handle fullscreen events by their W3 standard name:

    document.addEventListener(‘fullscreenchange’, function () {
    alert(‘foo’);
    });

  22. bird says:

    exit full screen plz use webkitExitFullscreen

  23. BUI Viet Dung says:

    Great demo!
    Thx

  24. Amitesh Ghate says:

    webkitExitFullScreen() wworking fine with Chrome what is to be used with IE and FF?

Leave a comment