Today Vimeo released its long-awaited “universal” embed code which utilises an <iframe> in place of the previous <object> tag. This new approach enables Vimeo to detect the type of device requesting playback, and to serve the appropriate format and resolution for the device, rather than failing if the Flash player was missing (as the old code did).
Along with the new default embed code, Vimeo provides an “Embedinator” script that, when included on any site, replaces occurrences of the old embed code with the new format. I’ve rewritten this script as a jQuery function with the added benefit that it reduces clutter by hiding the avatar, title and user of the clip from displaying in the playback frame. As with my previous script, you can also set a custom colour for selected parts of the interface.
Here’s a version bundled with jQuery that you can copy directly into the <head> of your theme template. The function is included below and should replace any previous version you’re using:
$(function() {
var color = "55cc55";
$("object[data^='http://vimeo.com']").each(function() {
var $obj = $(this);
var data = $obj.attr("data");
var temp = data.split("clip_id=")[1];
var id = temp.split("&")[0];
var server = temp.split("&")[1];
var w = $obj.attr("width");
var h = $obj.attr("height");
$obj.replaceWith(
"<iframe src='http://player.vimeo.com/video/"+id+
"?"+server+"&title=0&byline=0&portrait=0&color="+color+"' "+
"width='"+w+"' height='"+h+"' frameborder='0'></iframe>"
);
});
});
I’ll roll this into my premium themes in the next week or two.
Update: At present Tumblr replaces Flash video embed code (with the exception of YouTube) with a “requires Flash” placeholder div when serving pages to the iPhone, in both standard and optimised views. The above solution works perfectly to provide universal Vimeo support on the iPad, but won’t work for iPhone until this policy changes.
