code, howto

HTML5: Fullscreen API

While many people have used a go-to-fullscreen button as part of watching a video online, most probably don’t know that any page element can enable this functionality. At least, that is the idea behind the Fullscreen API. Any visual content element, be it a video, canvas, or really most anything else, can request to be put into fullscreen mode through a single JavaScript call.

However, the Fullscreen API itself is a little bit of a mess at the moment. While it has decent cross-browser support (~39%) , each major browser family has a different implementation of the specification. Currently, Webkit browsers center the element that requested the fullscreen mode. In Gecko (moz) browsers, the CSS rules of “width: 100%; height: 100%” are applied, stretching the content to fill all available space.

Luckily, each browser family also has their own pseudo CSS classes for styling a fullscreen element (ms and moz). Any project wanting true cross-browser support, then, will need to include some extra CSS rules and choose which, centered or stretched, they prefer and enforce it across the other browsers.

Like much of the current HTML5 functionality, though, each vendor has their own prefixes for the fullscreen properties and naming schemes for their functions. Despite this, most still enable the same basic functionality with their different names. The exception to this is Chrome, which is the only current browser that allows keyboard controls during fullscreen mode if the request for the mode is made using a special flag. Otherwise, and this is the same across the other browsers too, fullscreen mode is only for viewing content, not interacting with it.