Matthew Buchanan

Vimeo adds custom video URLs

Wed, 26 Jan 2011 22:59:54 +1300

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.

Tumblr Vimeo Embeds

Tue, 19 Oct 2010 09:10:53 +1300

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.

Better HTML5 Vimeo embeds on Tumblr

Thu, 19 Aug 2010 00:28:00 +1200

The latest version of this script has a new permanent home.

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.

Look who’s on Vimeo. Cracking good song from the new...

Fri, 14 May 2010 08:50:00 +1200

Look who’s on Vimeo. Cracking good song from the new record, with a refreshingly laid-back video.

I made this for Blake Whitman’s “5 Vignettes”...

Fri, 02 Apr 2010 21:36:00 +1300

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?

Zach Klein: AWESOME use of the Vimeo player in the header of...

Wed, 02 Dec 2009 16:32:27 +1300

Zach Klein:

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...

Tue, 13 Oct 2009 21:26:52 +1300

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.

Better Vimeo embeds on Tumblr

Tue, 14 Jul 2009 19:02:00 +1200

Note: an updated version of this function with support for Vimeo’s universal player is detailed in this post.

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&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF/g;
    var newOpts = "show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;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..."

Mon, 02 Mar 2009 17:31:00 +1300

“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...

Sat, 21 Feb 2009 00:41:00 +1300

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.