Matthew Buchanan (Home)

This script is the evolution of an original I wrote to process Vimeo Flash embed code in order to re-apply appearance customisations that were stripped out by Tumblr’s video-resizing engine.

An example of Vimeo’s player with custom colour applied.

This version serves two purposes. First, it processes all instances of Vimeo’s new HTML5 <iframe> embed code on the current page, re-applying custom colour and appearance preferences. Second, it replaces all instances of the previous Flash-based <object> embed code with the new HTML5 syntax. (This second step is now somewhat redundant, as Tumblr retroactively replaces Flash-based Vimeo embeds, but I’ve left it in for the sake of completeness.)

The code below is a jQuery function which you should call when the DOM object is ready. The hexadecimal colour and appearance options string should be altered to suit your taste.

function fixVimeo() {
    /*
        Better Vimeo Embeds 2.1 by Matthew Buchanan
        Modelled on the Vimeo Embedinator Script
        http://mattbu.ch/tumblr/vimeo-embeds/

        Released under a Creative Commons attribution license:
        http://creativecommons.org/licenses/by/3.0/nz/
    */
    var color = "55cc55";
    var opts = "title=0&byline=0&portrait=0";
    $("iframe[src^='http://player.vimeo.com']").each(function() {
        var src = $(this).attr("src");
        var w = $(this).attr("width");
        var h = $(this).attr("height");
        if (src.indexOf("?") == -1) {
            $(this).replaceWith(
                "<iframe src='"+src+"?"+opts+"&color="+
                color+"' width='"+w+"' height='"+h+
                "' frameborder='0'></iframe>"
            );
        }
    });
    $("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+"&"+opts+"&color="+color+
            "' width='"+w+"' height='"+h+
            "' frameborder='0'></iframe>"
        );
    });
}

Minimally tested. Please email any feedback.

Note: Tumblr outputs all video embed code (with the exception of YouTube) with a “requires Flash” message when serving pages to the iPhone, in both standard and optimised views. I’m told changes to this approach will be forthcoming soon.