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.