Created
December 7, 2012 06:26
-
-
Save issa-tseng/4231210 to your computer and use it in GitHub Desktop.
Make Youtube centered!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==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); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Can you make scripts that set a timer to automatically pause/stop on all Youtube embed videos? Like pause a video after X seconds!!?