Using the Browsers’ New HTML5 Fullscreen Capabilities

Update:

JW Player provides extensive fullscreen capabilities to give your audience an immersive video experience and help increase video engagement! Built-in fullscreen is supported on all browsers except Safari on iOS. The fullscreen API is available on all browsers, except Safari on iOS as well as the Android Stock Browser.

To learn more about the fullscreen features, check out the report on the developer site.

Also check out here to see all our player’s branding and UI features. If you have more questions, please reference our developer site and support site.

One of the killer features for HTML5 video is native browser fullscreen support. Without it, a viewer watching video through HTML5 is limited to seeing the video within the browser window, which is clearly not an immersive experience. In our latest State of HTML5 Video report, we reported that 50% of the browsers people are using now support fullscreen features natively. Some sites you probably currently use (Facebook, for one, in their image galleries) are already using the native browser fullscreen APIs. Here at LongTail, we are bringing this functionality into the next version of the JW Player, but in the meantime, I’ll walk you through the new feature, and show you how easy it is to implement.

Note: This article is aimed at website developers who are comfortable editing HTML and CSS, and a little bit of JavaScript

What is Native Fullscreen Anyway?

Native fullscreen means that the browser uses your entire monitor to display content. This means that no other windows are visible, and the browser’s menu, tabs, and other elements go away. Compare these two screenshots:

Step 0: Use a Fullscreen Enabled Browser

None of this new functionality will work if your browser doesn’t support it. Currently only Google Chrome version 15+, Firefox 10+ and Safari 5.1+ support fullscreen mode. Make sure you have the latest versions of those browsers for these examples to work!

Upcoming versions of the major browsers will all include fullsceen support in some form. Internet Explorer 10 (currently in beta) will provide support, and Opera (who were involved in writing the fullscreen draft spec) are likely not far behind.

Step 1: Decide What to Fullscreen

First, you’ll need to create a bit of HTML, and decide what element to blow up to fullscreen when the time comes. Here’s a little bit of code containing an image which we’ll eventually take to full-screen.

Example code:

  
  Click Me To Go Fullscreen! (not yet)

Step 2: Tell the Browser To Go Fullscreen

You’ll notice that in the above code, our fullscreen button doesn’t do anything yet. We’ll need to write some JavaScript which will take the image into fullscreen mode. I’ll explain what everything does in the code itself.

Example code:

Click Me To Go Fullscreen! (For real)

Step 3: Resize Your Elements

You may have noticed on some browsers (Opera and Chrome) that when you clicked on the fullscreen button that the video player was centered in the middle of a big black screen. That’s because by default, fullscreen mode doesn’t resize your elements for you. Luckily, there’s a simple bit of CSS which will allow you to specify how you want your elements to appear in fullscreen mode. It’s called something different in each browser, but in Chrome, it’s a CSS pseudo-class called :-webkit-full-screen. In Firefox, it’s called :-moz-full-screen. We want our player example to strech all the way across the screen, so that’s what we’ll do.

Example code:

Click Me To Go Fullscreen! (All the way)

Fullsceen and

Where Do We Go From Here?

You can make all sorts of changes to your fullscreen elements once you’re in fullscreen mode, either using CSS or using some more in-depth JavaScript code. For example, if you had a text overlay that you wanted to make visile in fullscreen mode, you could show it using the -full-screen CSS pseudo class (remember, you need to replicate this property for each browser). The rest is up to your imagination!