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.
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.
// Webkit for video elements only
As with entering fullscreen you can also cancel it. Using the cancelFullScreen method will exit any element currently in fullscreen mode.
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.
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.
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
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.
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
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.
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.