Skip to content

Instantly share code, notes, and snippets.

@issa-tseng
Created December 7, 2012 06:26
Show Gist options
  • Save issa-tseng/4231210 to your computer and use it in GitHub Desktop.
Save issa-tseng/4231210 to your computer and use it in GitHub Desktop.
Make Youtube centered!
// ==UserScript==
// @version 1.1
// @match http://www.youtube.com/*
// @match https://www.youtube.com/*
// ==/UserScript==
// TO INSTALL:
// 1. download this file.
// 2. open the extensions settings pane in chrome.
// 3. drag the file onto that pane.
// version 1.0 - initial
// version 1.1 - fixed a layout issue on non-player pages
(function()
{
// seriously, it's this easy.
document.body.className = document.body.className.replace(/site-left-aligned/gi, '');
// in fact, a bunch of the styles make me believe the left-alignedness was a last minute
// decision someone made, and the implementing developer put it all in as a optional thing
// in case someone wanted to take it out.
// but we should probably also fix:
css = [];
// the sidebar used to push the page around when it expanded. that's pretty silly,
// so let's restyle it and make it expand leftwards instead:
css.push('.guide-module-toggle-label { display: none !important; }') // remove this label that clips
css.push('.guide-expanded.sidebar-collapsed #guide { width: 1283px !important; }'); // always wide
var prefixes = [ '-webkit-', '-o-', '-ms-', '-moz-', '' ];
var prefixer = function(rule, prop) { var result = []; for (var i = 0; i < prefixes.length; i++) result.push(prefixes[i] + rule + ': ' + prop + ';'); return result.join('\n'); };
css.push('.guide-module .guide-module-toggle-icon { ' + prefixer('transition-property', 'none !important') + ' }'); // apply animation
// and this video player, why why why is it the size it is? the parent div is the right size!
// (turns out it's because of the way it slid around in the original prototype design)
// also set height to preserve aspect ratio. hey, i've always wanted the player to be bigger
// anyway.
css.push('.watch-medium #watch7-player { width: 945px !important; height: 564px !important; }');
// originally the right sidebar collapsed when the guide gets opened. this is probably why the
// design got changed, really. everything slid around disorientingly for no reason. but now that
// we don't want the sidebar to ever collapse anymore, we have to undo all the styles that used
// to make that happen.
css.push('.sidebar-collapsed #watch7-video, .sidebar-collapsed #watch7-main, .sidebar-collapsed #watch7-playlist { width: 945px !important; left: 29px !important; }');
css.push('.sidebar-collapsed #watch7-sidebar { width: 300px !important; padding: 0 0 10px 5px !important; }')
css.push('.sidebar-collapsed .watch-wide #watch7-sidebar { padding-top: 15px !important; }')
css.push('.sidebar-collapsed .watch-sidebar-section .yt-thumb-default-120, .sidebar-collapsed .watch-sidebar-section .yt-thumb-related-playlist-120 { width: 120px !important; height: 67px !important; }');
css.push('.sidebar-collapsed .watch-sidebar-section .video-list-item .ux-thumb-wrap, .sidebar-collapsed .watch-sidebar-section .video-list-item .user-thumb-large, .sidebar-collapsed .watch-sidebar-section .video-list-item .playlist-video-thumbs, .sidebar-collapsed .watch-sidebar-section .video-list-item .yt-pl-thumb { float: left !important; margin: 0 8px 0 0 !important; }');
css.push('.sidebar-collapsed .watch-sidebar-section .video-list-item a { padding: 0 5px !important; }');
css.push('.sidebar-collapsed .watch-sidebar-section .yt-thumb-default-120 img, .sidebar-collapsed .watch-sidebar-section .yt-thumb-related-playlist-120 img { width: auto !important; }');
css.push('.sidebar-collapsed .watch-sidebar-section .video-list-item .badge, .sidebar-collapsed .watch-sidebar-section .video-list-item .description, .sidebar-collapsed .watch-sidebar-section .video-list-item .view-count, .sidebar-collapsed .watch-sidebar-section .video-list-item .annotation, .sidebar-collapsed .watch-sidebar-section .video-list-item .yt-uix-button-subscription-container { display: block !important; }')
// attach styles..
var styleElem = document.createElement('style');
styleElem.type = 'text/css';
var textElem = document.createTextNode(css.join('\n'));
styleElem.appendChild(textElem);
document.head.appendChild(styleElem);
})();
@thienha1
Copy link

Can you make scripts that set a timer to automatically pause/stop on all Youtube embed videos? Like pause a video after X seconds!!?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment