Okay Geek Farm
How to - Vimeo Embed videos working on iPad
Brandon DavenportUpdate from @squaregirl: You will need to have a Vimeo plus account for this. You need to enable “Mobile Embedding” found in | Settings > Embed
Isn’t it frustrating, uploading your video to Vimeo for that fantastic Vimeo player - and then have it not play on the iPad? Well, Vimeo (which seems to be the perfect companion for iPad) recently pushed out their HTML5 compatibility plan to all Vimeo videos, so essentially you can currently watch them on the iPad, but only on Vimeo’s site. But now, you can embed them on your own website, thanks to some thoughtfulness from the Vimeo forums, and one hell of a creative lady…
I recently migrated a client to Squarespace that wanted their videos to play inline on the iPad, but didn’t want to use Youtube. I personally like the player control you get with a Vimeo Plus account, and since Vimeo videos are encoded as H.264, I was sure there was a way. It took a lot of digging, and some fiddling with a script I came across on the Vimeo forums, but I finally got it working on a non-HTML5 page.
Krystyn Heide - Senior designer @squarespace
So, with a little creativity and some coding expertise, Krystyn found out how to embed Vimeo videos in HTML5, while still keeping the default Flash functionality when on a desktop. It is what we have been hoping for, and maybe this will evolve into a simple tool that will convert the default embed code, and add the extra HTML5 flare (who knows, I may have some time :P)
The code (it wont bite!)
<script type=”text/javascript”>
var agent=navigator.userAgent.toLowerCase();
var is_iphone = (agent.indexOf(‘iphone’)!=’-1’);
var is_ipad = (agent.indexOf(‘ipad’)!=’-1’);
if (is_iphone) {
document.write(“<video src=’http://www.vimeo.com/play_redirect?clip_id=00000000&quality=mobile’ controls=’controls’ width=’000’ height=’000‘></video>”);
}
else if (is_ipad) {
document.write(“<video src=’http://www.vimeo.com/play_redirect?clip_id=00000000’ controls=’controls’ width=’000’ height=’000‘></video>”);
}
else {
document.write(“<object width=’000’ height=’000‘><param name=’allowfullscreen’ value=’true’ /><param name=’allowscriptaccess’ value=’always’ /><param name=’movie’ value=’http://vimeo.com/moogaloop.swf?clip_id=00000000&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=ffffff&fullscreen=1’ /><embed src=’http://vimeo.com/moogaloop.swf?clip_id=00000000&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=ffffff&fullscreen=1’ type=’application/x-shockwave-flash’ allowfullscreen=’true’ allowscriptaccess=’always’ width=’000’ height=’000‘></embed></object>”);
}
</script>
Instructions - First you need to notice the bold text (they are all zero’s). This outlines the things you need to change, which are 3 things:
The width and height, and the video ID. Choose the width and height, like “400” or “200” (this is in pixles, but remember not to add “px” at the end). Next add the video ID, which you can find in any Vimeo URL - http://vimeo.com/11311870 - The bolded text is the ID.
How does this work? - Well it is a very simple (which is important) and an extremely clever approach, which splits the embedding process on the client’s end into 2 basic steps. I cannot see why I did not do this first, Krystyn oh darn you!
From what my blurry tuned sense of Javascript experience tells me, it first detects which device is viewing the website using the “user.agent” method, and by default ignores it. But if it notices that it is an iPhone or iPad, it fires the if (is_iphone) or if (is_ipad) both of which you can customize to fit your needs. The iPhone is set to have a “mobile” setting in the URL string of the video, and the iPad defaults to the full quality.
If there is not an iPhone, or iPad, it rolls back to the last “if” statement which fires the flash player, suitable in any browser. Surley some top notch brainstorming by @squaregirl , and some great feedback from the Vimeo community. Internet FTW.
See it in action - over at Vision On
Important Update:
“You need Vimeo Plus and mobile embedding optimized in Settings > Embed” - @squaregirl
