Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // ==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');
- fixScrollbars(); // Added content
- 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() {
- oldVerticalPosition = window.pageYOffset;
- moveVideoContainer()
- && resizeVideoPlayer()
- && addBodyClass() // Only add class if found & moved the player.
- && initScrollbarFix(); // Added content
- }
- // Added content below (START)
- var oldVerticalPosition;
- function initScrollbarFix() {
- oldVerticalPosition = -1;
- setInterval(fixScrollbars, 1000);
- return 1;
- }
- function fixScrollbars() {
- if(oldVerticalPosition != window.pageYOffset) {
- oldVerticalPosition = window.pageYOffset;
- appendStyle('body', 'overflow-x', window.pageYOffset == 0 ? 'hidden' : 'visible');
- //appendStyle('body', 'overflow-y', window.pageYOffset == 0 ? 'hidden' : 'visible'); // Unforunately, it (partially) locks up the vertical scrolling
- }
- }
- // Added content (END)
- main();
- })();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement