Using the Browsers' New HTML5 Fullscreen Capabilities

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:

<div class="example">
  <img class="video_player" src="image.jpg"></img>
  <button>Click Me To Go Fullscreen! (not yet)</button>
</div>

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:

<script type="text/javascript">
  function goFullscreen(id) {
    // Get the element that we want to take into fullscreen mode
    var element = document.getElementById(id);
    
    // These function will not exist in the browsers that don't support fullscreen mode yet, 
    // so we'll have to check to see if they're available before calling them.
    
    if (element.mozRequestFullScreen) {
      // This is how to go into fullscren mode in Firefox
      // Note the "moz" prefix, which is short for Mozilla.
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
      // This is how to go into fullscreen mode in Chrome and Safari
      // Both of those browsers are based on the Webkit project, hence the same prefix.
      element.webkitRequestFullScreen();
   }
   // Hooray, now we're in fullscreen mode!
  }
</script>

<img class="video_player" src="image.jpg" id="player"></img>
<button onclick="goFullscreen('player'); return false">Click Me To Go Fullscreen! (For real)</button>

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:

<style type="text/css">
  .player:-webkit-full-screen {
    width: 100%;
    height: 100%;
  }
  .player:-moz-full-screen {
    width: 100%;
    height: 100%;
  }
</style>
<img class="video_player" src="image.jpg" id="player3"></img>
<button onclick="goFullscreen('player');">Click Me To Go Fullscreen! (All the way)</button>

Fullsceen and <iframe> - a technical note

While you can take pretty much any element and take it to fullscreen mode, <iframe> elements are a bit trickier. You'll need to set the "allowFullScreen" property on the tag itself, which allows the contents to be taken into fullscreen mode.

<iframe src="iframe_src.html" width="400" height="300" allowFullScreen></iframe>

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!

Posted by Pablo Schklowsky on May 24, 2012