Vimeo HTML5 Embed Workaround

Many people are using Vimeo.com for their video hosting rather than YouTube. I’ve been using it for nearly a year. Personally, I like it better than YouTube because you’re not limited to 10-minute segments per video. I like the features they provide with a Vimeo Plus membership, and the user community that’s grown there. Also, the content on Vimeo seems to have more of an artistic focus, with some very talented folks posting quality work.

One of the limitations with Vimeo right now, however, is the lack of HTML5 embedding and the impact this has on iPhones and iPads. You can view videos on the Vimeo.com mobile site (www.vimeo.com/m) with your iPhone and iPad (neither of which will display Adobe Flash content), but if you want to embed your videos on another site, Vimeo doesn’t yet have a player implemented to handle embedding for those devices.

YouTube has a solution in place, and there’s been some push from Vimeo members in recent months to get this done there as well. Recently the Vimeo staff responded that they’re working on it, and I expect they will deliver something good. We don’t know how long it will be until it’s ready, so in the meantime I thought I would post a temporary solution to get embedded Vimeo videos working on the iPhone and iPad. This is not my original idea. I found it in this YouTube video describing the process, and decided to document it a little further and put it here. Thanks to YouTube user “optikalefxx” for posting his solution for everyone.

(It’s nothing more than a javascript browser-sniffing workaround/hack, but it works well enough and might be a good way to bridge the gap and get your videos to these popular iDevices until Vimeo delivers a proper API for it.)

Here’s a link to the code in a PDF you can download, including some notes, caveats and assumptions about using it. (If you have trouble with formatting when copying the code from the PDF, try this Google doc where I have included a complete HTML page that you can work from.) I assume you’ll know what to do with this, how to modify it for your particular video ID, dimensions, controls color, etc. As always, make a backup copy of any files before you modify, and test it across your platforms and devices before publishing. This method is intended to be temporary, and it may break in the near future as Vimeo implements their HTML5 embed solution, so don’t put this out there expecting it to be a long-term fix. Caveat developer.

Posted: July 15th, 2010
Filed under: Development, Mobile, Software, Video Tags: code, iOS, ipad, iphone, vimeo | 4 Comments »

---