A transmission from the deep south.
Andrew Pile on Vimeo’s staff blog:
Ever notice how hard it is to remember specific video URLs? http://vimeo.com/17853140 isn’t very descriptive is it? Today we’re rolling out a new option for every video that let’s you specify an alternative human-readable shortcut.
For now they’re redirects to the old, numeric URL format, but hey sometimes it’s the little things.
In August I revised my jQuery code for restoring customisation to Flash-based Vimeo embeds on Tumblr, with a version that supports Vimeo’s new universal syntax. The new script found every instance of Flash-based embed code and replaced it with universal <iframe> code (including customisations for colour and metadata visibility), making it useful for legacy content.
Over the past week Tumblr has changed its approach, and now converts all legacy Vimeo code to universal, preserving customisations where they were previously set. This renders the previous version of the script largely redundant, so I’ve extended it to override the default customisations, for users who were previously relying on my script to perform these en masse.
The script now has a new permanent home via Tumblr’s static page support. Please let me know if you encounter any problems.
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.
I made this for Blake Whitman’s “5 Vignettes” project, from a total of about four minutes of footage I took a couple of weeks back and would probably never have done anything with otherwise.
If anyone reading has experience with motion tracking in Final Cut Express I’d be interested in a recommendation for appropriate tools. Upgrading to FCP Studio isn’t really on the cards, so what are my options (aside from the altogether unconvincing, hand-keyframed work here)? Is Mocha any good?
AWESOME use of the Vimeo player in the header of this page.
Thanks! As Ronen mentions, this came our way via Tumblr Projects, and all of the modifications to Jacob’s Redux theme were done by Mike Harding. It’s a great way to get a custom look without having to start from scratch with a new theme.
Hey kids, the Nice Type channel I curate is now on Tumblr! And Twitter, what the hell. The channel showcases the best of Vimeo’s motion and kinetic type animations; both of these are automated feeds in case you’d care to follow here, or there.
Sidenotes: I’m using the Nice Type theme (and my own Tumblr) to test Typekit (more on the results of that later). The Nice Type tumblelog imports posts as links (Tumblr doesn’t have an option to auto-import video feeds) and then retrieves likes, views and owner data via Vimeo’s JSONP API. A side-effect is that reblogging of these posts won’t work so well, but hey, I was 90% done when I realised this flaw in my plan.
Vimeo offers plenty of customisation options when embedding its player, but Tumblr’s automated code generator doesn’t respect these, overwriting them with its own defaults. To fix this, I wrote a quick jQuery function to rewrite Tumblr’s default options string for all Vimeo embeds on the current page (get the ready-to-install version):
$("object[data^='http://vimeo.com']").each(function() {
var parent = $(this).parent();
var vimeoCode = parent.html();
var params = "";
if (vimeoCode.toLowerCase().indexOf("<param") == -1) {
$("param", this).each(function() {
params += $(this).get(0).outerHTML;
});
}
var oldOpts = /show_title=1&show_byline=0&show_portrait=0&color=00ADEF/g;
var newOpts = "show_title=0&show_byline=0&show_portrait=0&color=55CC55";
vimeoCode = vimeoCode.replace(oldOpts, newOpts);
if (params != "") {
params = params.replace(oldOpts, newOpts);
vimeoCode = vimeoCode.replace(/<embed/i, params + "<embed");
}
parent.html(vimeoCode);
});
Tweak the newOpts string to whatever you prefer — it will work for all embeds except those that have had their options locked by their respective owners. You can see it in action here.
Update: IE mangles the <object> tag when returning it as an HTML string. I’ve updated the code to make it work as intended.
In many ways, Vimeo’s ethical hipster editorial philosophy makes it a more natural fit than YouTube for a buttoned-up government website looking to offer video to the masses while minimizing risks that consumers will be referred to offensive material developed by other users of a video sharing service.
— The Washington Post’s Garance Franke-Ruta covers the White House’s quiet switch to Vimeo for broadcasting its video content. (via Vimeo Buzz)
Speaking of Vimeo, here’s a peek at the new stats module that will be part of Vimeo Plus 2.0, due sometime soon. So damn good.
Written and designed by Matthew Buchanan. Colophon. Please give credit. Email
