Skinning the YouTube Player with HTML5 Video Support
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.