// ==UserScript== // @name Resize YT To Window Size // @description Moves the video to the top of the website and resizes it to the screen size. // @author Chris H (Zren / Shade) // @icon http://youtube.com/favicon.ico // @homepageURL http://userscripts.org/scripts/show/153699 // @downloadURL http://userscripts.org/scripts/source/153699.user.js // @updateURL http://userscripts.org/scripts/source/153699.meta.js // @namespace http://xshade.ca // @version 1.11 // @include http*://*.youtube.com/watch?* // @include http*://youtube.com/watch?* // ==/UserScript== /* ** Youtube Layout lookup ** [? - 20 March 2013] #watch7-video-container (#watch7-playlist-container is injected above this element) #watch7-video #watch-player ? embed#movie_player ? [20 March 2013] #watch7-video-container --renamed--> #watch7-container (renamed back then?) #player (#watch7-playlist-container is injected above this element) #player-api embed#movie_player #watch7-creator-bar [2 April 2013] #watch7-playlist-container --renamed--> #playlist [3 May 2013] .watch-playlist-collapsed and .watch-medium now attach to #player #watch7-container .watch-playlist #player .watch-playlist-collapsed .watch-medium (moved) #playlist (Moved to inside #player) #watch7-playlist-scrollfloater #watch7-playlist-bar #watch7-playlist-data #watch7-playlist-bar #watch7-main-container ... */ (function () { "use strict"; //--- Constants var scriptShortName = 'ytwp'; // YT Window Player var injectedStyleId = scriptShortName + '-style'; var scriptBodyClassId = scriptShortName + '-window-player'; var scriptBodyClassSelector = 'body.' + scriptBodyClassId; var transitionProperties = ["transition", "-ms-transition", "-moz-transition", "-webkit-transition", "-o-transition"]; //--- Utils function isStringType(obj) { return typeof obj === 'string'; } function isArrayType(obj) { return obj instanceof Array; } function isObjectType(obj) { return typeof obj === 'object'; } function isUndefined(obj) { return typeof obj === 'undefined'; } function buildCSS(selector, styles) { var s = ""; for (var key in styles) { s += "\t" + key + ": " + styles[key] + ";\n"; } return selector + " {\n" + s + "}\n"; } function appendStyle(selector, k, v) { var newStyle; if (!isUndefined(k) && !isUndefined(v) && isStringType(k)) { // v can be any type (as we stringify it). // appendStyle('#blarg', 'display', 'none'); var d = {}; d[k] = v; newStyle = buildCSS(selector, d); } else if (!isUndefined(k) && isUndefined(v) && isObjectType(k)) { // appendStyle('#blarg', {'display': 'none'}); newStyle = buildCSS(selector, k); } else { // Invalid Arguments console.log('Illegal arguments', selector, k, v); return; } var styleElement = document.getElementById(injectedStyleId); if (!styleElement) { styleElement = document.createElement('style'); styleElement.type = 'text/css'; styleElement.id = injectedStyleId; document.getElementsByTagName('head')[0].appendChild(styleElement); } styleElement.appendChild(document.createTextNode(newStyle)); } function buildVenderPropertyDict(propertyNames, value) { var d = {}; for (var i in propertyNames) d[propertyNames[i]] = value; return d; } //--- function moveVideoContainer() { //--- Video Container var videoContainer = document.getElementById("player-api"); // Make sure YT hasn't changed or on a page without a video player. if (!videoContainer) return 0; // Move the video to the top of page. var body = document.body; body.insertBefore(videoContainer, body.firstChild); return 1; } function resizeVideoPlayer() { //--- Video Player // var d = buildVenderPropertyDict(transitionProperties, 'left 0s linear, padding-left 0s linear'); appendStyle(scriptBodyClassSelector + ' #player', d); // var d = buildVenderPropertyDict(transitionProperties, 'width 0s linear, left 0s linear'); appendStyle(scriptBodyClassSelector + ' #player-api', d); // !important is mainly for simplicity, but is needed to override the !important styling when the Guide is open due to: // .sidebar-collapsed #watch7-video, .sidebar-collapsed #watch7-main, .sidebar-collapsed .watch7-playlist { width: 945px!important; } appendStyle( scriptBodyClassSelector + ' #player-api, ' + scriptBodyClassSelector + ' #movie_player', { 'width': '100% !important', 'height': '100% !important' } ); //--- Sidebar // Remove the transition delay as you can see it moving on page load. var d = buildVenderPropertyDict(transitionProperties, 'margin-top 0s linear, padding-top 0s linear'); // Override sidebar position. It changes according to the video player's size. // Small video player state has: margin-top: -390px; which overlaps the video. d['margin-top'] = '15px !important'; // Large video player has 15px padding-top. appendStyle(scriptBodyClassSelector + ' #watch7-sidebar', d); //--- Fix Other Possible Style Issues //--- Whitespace Leftover From Moving The Video appendStyle(scriptBodyClassSelector + ' #page.watch', 'padding-top', '0'); //--- Video Manager (When viewing own videos) appendStyle('#body-container', 'clear', 'both'); // FF needs this appendStyle('#watch7-creator-bar', { 'position': 'relative', // Needed in order to use z-index 'z-index': '2', // #guide.zIndex + 1 }); //--- Playlist Bar // Set the playlist bar width when large to the same as when small (so it expands over the sidebar). appendStyle(scriptBodyClassSelector + ' #watch7-playlist-data .watch7-playlist-bar', 'width', '945px !important'); appendStyle(scriptBodyClassSelector + ' #watch7-playlist-bar-toggle-button', 'display', 'inline'); //--- Playlist Bar: Youtube Center Overrides (Temporary) // Fix padding on the playlist bar when using 'Center Page'. appendStyle(scriptBodyClassSelector + '.ytcenter-site-watch.ytcenter-site-center .watch7-playlist', 'padding-left', '0'); appendStyle(scriptBodyClassSelector + '.ytcenter-site-watch.ytcenter-site-center.guide-collapsed .watch7-playlist', 'padding-left', '0 !important'); //--- Playlist Bar: Sidebar // Override sidebar position at element level. It changes according to the video player's size. //#watch7-playlist-tray-container { height: 363px; } //#watch7-playlist-tray { border-bottom: 27px solid #1B1B1B; } // Needs to be !important as it needs to override when on a non-playlist page (which requires !important). appendStyle(scriptBodyClassSelector + ' #watch7-container.watch-playlist #player.watch-playlist-collapsed+#watch7-main-container #watch7-sidebar', 'margin-top', '0px !important'); appendStyle(scriptBodyClassSelector + ' #watch7-container.watch-playlist #player:not(.watch-playlist-collapsed)+#watch7-main-container #watch7-sidebar', 'margin-top', '390px !important'); appendStyle(scriptBodyClassSelector + ' #watch7-container.watch-playlist #player.watch-medium:not(.watch-playlist-collapsed)+#watch7-main-container #watch7-sidebar', 'margin-top', '480px !important'); return 1; } function addBodyClass() { // Insert CSS Into the body so people can style around the effects of this script. document.body.classList.add(scriptBodyClassId); return 1; } function main() { moveVideoContainer() && resizeVideoPlayer() && addBodyClass(); // Only add class if found & moved the player. } main(); })();
Continue reading...
