Skip to content

Skinning the YouTube Player with HTML5 Video Support

by benbarnett on November 24th, 2010

Where we are now

So it seems that the YouTube Player API doesn’t offer any support for the HTML5 video player, while the standard Embed code does. It kinds of makes sense with the way they’ve implemented their player API as ultimately it’s┬ájust embedding a SWF with a few paramaters, but its still annoying. Its clear that the major players are working towards something, but for now we’re left with finding our own way through.

The reason its annoying is that the only way to truly skin the YouTube player (without its hideous & pointless background colour customization) is to use the Chromeless player and then overlay your own controls. This is relatively easy to do, and a there’s a reasonable demonstration on the YouTube Player Demo page.

What’s the point?

The point is so that you can have a custom YouTube player, and have it work on mobile devices without Flash. It also means that you get the benefits of YouTube’s encoding lair and that the number of ‘Views’ will be counted both on YouTube and from your site.

Making it work

As we need SWFObject on the page in order to embed the Chromeless player for our custom skin, we can use a handy method in its API:

swfobject.hasFlashPlayerVersion(versionStr) // e.g. "8.0.0"

With that, we can do a simple if statement, and hand the logic back to the standard YouTube embed code should that function return false. We do this because the basic embed code will use the HTML5 player where it can, giving us native iPad/iPhone/iWhatever support. You can grab this simply by going to YouTube, clicking Embed, and copying the code it gives you.

Either way, we palm off to YouTube at this point, allowing them to make the correct decision in a non-Flash environment, the logic behind which will probably change quite regularly.

Note: it’s not possible to skin the HTML5 Video Player on Mobile Safari, because it uses the native video player. Not a biggie though, it looks awesome.

Here’s a basic code example:

Demo

This is ugly, rudimentary and not for production. But it demonstrates the technique. Try the link below out on any browser, and on an iPad/iPhone:

http://clients.brushfiredesign.net/playground/youtube/youtube.html

You’ll see that with some basic styling, you can fairly easily create a completely custom player design using the elements on that page, which also works on your iPad.

From → Techniques

4 Comments
  1. Peter permalink

    The API Controlling the Video does not work on ipad. Need a solution.

    • benbarnett permalink

      Can you explain a bit more? It definitely works on mine.

  2. I disabled flash in the browser but the HTML5 alternative did not load in my Safari browser. Sorry!

    • benbarnett permalink

      Yeah it’s only really used for Mobile Safari – with a view to getting YouTube videos on the iPad/iPhone. Sorry, I haven’t explained that very well in the post.

Comments are closed.