Matthew Buchanan (Home)

Inky alerted me to a few extra customisation options for YouTube’s video player:

YouTube’s interface lets you choose one of nine colour schemes, adding two parameters to the embed code: color1 and color2. Once you select a theme, you can edit these parameters to use any colours you like.

His suggestion of using a solid white background behind the player controls improves the look of the player out of sight, so I remixed my Vimeo customisation script to do the same for YouTube embeds. Here’s the jQuery function:

$("object").each(function() {
    if ($(this).find("param[value^='http://www.youtube.com']").length > 0) {
        var parent = $(this).parent();
        var youtubeCode = parent.html();
        var params = "";
        if (youtubeCode.toLowerCase().indexOf("<param") == -1) {
            $("param", this).each(function() {
                params += $(this).get(0).outerHTML;
            });
        }
        var oldOpts = /rel=0/g;
        var newOpts = "rel=0&amp;hd=1&amp;color1=0xFFFFFF&amp;color2=0xFFFFFF";
        youtubeCode = youtubeCode.replace(oldOpts, newOpts);
        if (params != "") {
            params = params.replace(oldOpts, newOpts);
            youtubeCode = youtubeCode.replace(/<embed/i, params + "<embed");
        }
        parent.html(youtubeCode);
    }
});

If you’re unfamiliar with such things, there’s a ready-to-install version that includes the jQuery directives to run the code as soon as the DOM has loaded. Let me know if you strike any problems. Here it is in action:

Update: on the suggestion of Billy Disney I’ve added the flag to force HD playback. I’m also investigating the possibility of allowing 16:9 embeds, at present Tumblr outputs all YouTube code at 4:3.

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.

Last year I released a plugin to display notes for any post in a Tumblr site, in much the same fashion as the Dashboard does. At the time, in order to display the notes count, the plugin was required to preload all notes for every post, which made it very inefficient. In February, Tumblr added custom theme tags for notes, so here’s an updated version of the plugin I’ve been using for the past few months: it uses theme tags to display the note count, and only loads the content of the notes when a user clicks to view them for a particular post.

The benefit of this approach is the ability to display notes on any page of your Tumblr site, not possible using custom tags alone.

Continue reading…