YouTube – Come back to the center

Update 2014: This article is very much obsolete and this script is no longer maintained.

Get YouTube Centered in your browser again. Requires Chrome or Firefox. And a understanding how to copy/paste this script into a new script editor in Tamper(Grease)Monkey.

So if you’re like me, and hate YouTube following the new google theme of “stick to the left” like I do, install TamperMonkey (I assume you use Chrome… everyone should…) and install this script. Firefox users, you can use GreaseMonkey.

// ==UserScript==
// @name       YouTube Center Layout
// @namespace  http://darrennolan.com
// @version    1.8
// @description Center YouTube's new Layout to the middle of your screen.
// @match      http://youtube.com/*
// @match      http://www.youtube.com/*
// @match      https://youtube.com/*
// @match      https://www.youtube.com/*
// @copyright  2012+, Darren Nolan
// @require http://code.jquery.com/jquery-latest.js
// ==/UserScript==



if (window.location == window.parent.location) {
    // Disable silly CSS3 transitions that makes the page fly all over the place //
    $("#player").css("-webkit-animation", "none")
    	.css("-moz-animation", "none")
    	.css("-ms-animation", "none")
    	.css("animation", "none")
    
    	.css("-webkit-transition", "none")
    	.css("-moz-transition", "none")
    	.css("-ms-transition", "none")
    	.css("transition", "none");
    
    // Center the player, rid the padding on the left. //
    $("#player-api").css("margin", "0 auto 0 auto");
    $("#player").css("padding-left", "0");
    
    // After we get the player done, please fix up the comments a little. Nothing too fancy though, cause ant-eaters don't need fancy comments. //
 	$("[id$=-main-container]").css("-webkit-animation", "none")
    	.css("-moz-animation", "none")
    	.css("-ms-animation", "none")
    	.css("animation", "none")
    
    	.css("-webkit-transition", "none")
    	.css("-moz-transition", "none")
    	.css("-ms-transition", "none")
    	.css("transition", "none");
    
    $("[id$=-main-container]")
    	.css("margin", "0 auto 0 auto")
    	.css("padding-left", "0")
    	.css("width", $("#player-api").width());
    
}

If you’re clever – you can apply this to google+ if you like. Wonder if google will make this an optional setting one day, considering it’s just one class applied which makes it all horrible.

Update! Installation UserScript.org now available.