☰

Resize YT To Window Size

Moves the YouTube video to the top of the website and resizes it to the window size.

当前为 2016-09-03 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name            Resize YT To Window Size
  3. // @description     Moves the YouTube video to the top of the website and resizes it to the window size.
  4. // @author          Chris H (Zren / Shade)
  5. // @icon            https://youtube.com/favicon.ico
  6. // @homepageURL     https://github.com/Zren/ResizeYoutubePlayerToWindowSize/
  7. // @namespace       http://xshade.ca
  8. // @version         86
  9. // @include         http*://*.youtube.com/*
  10. // @include         http*://youtube.com/*
  11. // @include         http*://*.youtu.be/*
  12. // @include         http*://youtu.be/*
  13. // ==/UserScript==
  14.  
  15. // Github:          https://github.com/Zren/ResizeYoutubePlayerToWindowSize
  16. // GreasyFork:      https://greasyfork.org/scripts/811-resize-yt-to-window-size
  17. // OpenUserJS.org:  https://openuserjs.org/scripts/zren/Resize_YT_To_Window_Size
  18. // Userscripts.org: http://userscripts-mirror.org/scripts/show/153699
  19.  
  20. (function (window) {
  21.     "use strict";
  22.     
  23.     //--- Imported Globals
  24.     // yt
  25.     // ytcenter
  26.     // html5Patched (Youtube+)
  27.     // ytplayer
  28.     var uw = window;
  29.  
  30.     //--- Already Loaded?
  31.     // GreaseMonkey loads this script twice for some reason.
  32.     if (uw.ytwp) return;
  33.     
  34.     //--- Is iframe?
  35.     function inIframe () {
  36.         try {
  37.             return window.self !== window.top;
  38.         } catch (e) {
  39.             return true;
  40.         }
  41.     }
  42.     if (inIframe()) return;
  43.  
  44.     //--- Utils
  45.     function isStringType(obj) { return typeof obj === 'string'; }
  46.     function isArrayType(obj) { return obj instanceof Array; }
  47.     function isObjectType(obj) { return typeof obj === 'object'; }
  48.     function isUndefined(obj) { return typeof obj === 'undefined'; }
  49.     function buildVenderPropertyDict(propertyNames, value) {
  50.         var d = {};
  51.         for (var i in propertyNames)
  52.             d[propertyNames[i]] = value;
  53.         return d;
  54.     }
  55.     function addClass(el, value) {
  56.         var classes = value.split(' ');
  57.         for (var i = 0; i < classes.length; i++) {
  58.             el.classList.add(classes[i]);
  59.         }
  60.     }
  61.     function removeClass(el, value) {
  62.         var classes = value.split(' ');
  63.         for (var i = 0; i < classes.length; i++) {
  64.             el.classList.remove(classes[i]);
  65.         }
  66.     }
  67.  
  68.     //--- Stylesheet
  69.     var JSStyleSheet = function(id) {
  70.         this.id = id;
  71.         this.stylesheet = '';
  72.     };
  73.  
  74.     JSStyleSheet.prototype.buildRule = function(selector, styles) {
  75.         var s = "";
  76.         for (var key in styles) {
  77.             s += "\t" + key + ": " + styles[key] + ";\n";
  78.         }
  79.         return selector + " {\n" + s + "}\n";
  80.     };
  81.  
  82.     JSStyleSheet.prototype.appendRule = function(selector, k, v) {
  83.         if (isArrayType(selector))
  84.             selector = selector.join(',\n');
  85.         var newStyle;
  86.         if (!isUndefined(k) && !isUndefined(v) && isStringType(k)) { // v can be any type (as we stringify it).
  87.             var d = {};
  88.             d[k] = v;
  89.             newStyle = this.buildRule(selector, d);
  90.         } else if (!isUndefined(k) && isUndefined(v) && isObjectType(k)) {
  91.             newStyle = this.buildRule(selector, k);
  92.         } else {
  93.             // Invalid Arguments
  94.             console.log('Illegal arguments', arguments);
  95.             return;
  96.         }
  97.  
  98.         this.stylesheet += newStyle;
  99.     };
  100.  
  101.     JSStyleSheet.injectIntoHeader = function(injectedStyleId, stylesheet) {
  102.         var styleElement = document.getElementById(injectedStyleId);
  103.         if (!styleElement) {
  104.             styleElement = document.createElement('style');
  105.             styleElement.type = 'text/css';
  106.             styleElement.id = injectedStyleId;
  107.             document.getElementsByTagName('head')[0].appendChild(styleElement);
  108.         }
  109.         styleElement.appendChild(document.createTextNode(stylesheet));
  110.     };
  111.  
  112.     JSStyleSheet.prototype.injectIntoHeader = function(injectedStyleId, stylesheet) {
  113.         JSStyleSheet.injectIntoHeader(this.id, this.stylesheet);
  114.     };
  115.  
  116.     //--- Constants
  117.     var scriptShortName = 'ytwp'; // YT Window Player
  118.     var scriptStyleId = scriptShortName + '-style'; // ytwp-style
  119.     var scriptBodyClassId = scriptShortName + '-window-player'; // .ytwp-window-player
  120.     var viewingVideoClassId = scriptShortName + '-viewing-video'; // .ytwp-viewing-video
  121.     var topOfPageClassId = scriptShortName + '-scrolltop'; // .ytwp-scrolltop
  122.     var scriptBodyClassSelector = 'body.' + scriptBodyClassId; // body.ytwp-window-player
  123.  
  124.     var videoContainerId = 'player';
  125.     var videoContainerPlacemarkerId = scriptShortName + '-placemarker'; // ytwp-placemarker
  126.  
  127.     var transitionProperties = ["transition", "-ms-transition", "-moz-transition", "-webkit-transition", "-o-transition"];
  128.     var transformProperties = ["transform", "-ms-transform", "-moz-transform", "-webkit-transform", "-o-transform"];
  129.  
  130.     //--- YTWP
  131.     var ytwp = uw.ytwp = {
  132.         scriptShortName: scriptShortName, // YT Window Player
  133.         log_: function(logger, args) { logger.apply(console, ['[' + this.scriptShortName + '] '].concat(Array.prototype.slice.call(args))); return 1; },
  134.         log: function() { return this.log_(console.log, arguments); },
  135.         error: function() { return this.log_(console.error, arguments); },
  136.  
  137.         initialized: false,
  138.         pageReady: false,
  139.         watchPage: false,
  140.     };
  141.  
  142.     ytwp.util = {
  143.         isWatchUrl: function (url) {
  144.             if (!url)
  145.                 url = uw.location.href;
  146.             return url.match(/https?:\/\/(www\.)?youtube.com\/watch\?/);
  147.         }
  148.     };
  149.  
  150.     ytwp.html5 = {
  151.         app: null,
  152.         YTRect: null,
  153.         YTApplication: null,
  154.         playerInstances: null,
  155.         moviePlayerElement: null,
  156.     };
  157.     ytwp.html5.getPlayerRect = function() {
  158.         var moviePlayerElement = this.element || ytwp.html5.moviePlayerElement || document.querySelector('movie_player');
  159.         return new ytwp.html5.YTRect(moviePlayerElement.clientWidth, moviePlayerElement.clientHeight);
  160.     };
  161.     ytwp.html5.getApplicationClass = function() {
  162.         if (ytwp.html5.YTApplication === null) {
  163.             var testEl = document.createElement('div');
  164.             var testAppInstance = uw.yt.player.Application.create(testEl, {});
  165.             // var testAppInstance = uw.yt.player.Application.create("player-api", uw.ytplayer.config);
  166.             ytwp.html5.YTApplication = testAppInstance.constructor;
  167.  
  168.             // Cleanup testAppInstance
  169.             var playerInstances = ytwp.html5.getPlayerInstances();
  170.  
  171.             var testAppInstanceKey = null;
  172.             Object.keys(playerInstances).forEach(function(key) {
  173.                 if (playerInstances[key] === testAppInstance) {
  174.                     testAppInstanceKey = key;
  175.                 }
  176.             });
  177.             testAppInstance.dispose();
  178.             delete playerInstances[testAppInstanceKey];
  179.             
  180.         }
  181.         return ytwp.html5.YTApplication;
  182.     };
  183.     ytwp.html5.getPlayerInstances = function() {
  184.         if (ytwp.html5.playerInstances === null) {
  185.             var YTApplication =  ytwp.html5.getApplicationClass();
  186.             if (YTApplication === null)
  187.                 return null;
  188.  
  189.             // Use yt.player.Application.create to find the playerInstancesKey.
  190.             // function (a,b){try{var c=e9.D(a);if(e9.o[c]){try{e9.o[c].dispose()}catch(e){Fi(e)}e9.o[c]=null}var d=new e9(a,b);Kb(d,function(){e9.o[c]=null});return e9.o[c]=d}catch(e){throw Fi(e),e.stack;}}
  191.             var appCreateRegex = /^function \(a,b\)\{try\{var c=([a-zA-Z_$][\w_$]*)\.([a-zA-Z_$][\w_$]*)\(a\);if\(([a-zA-Z_$][\w_$]*)\.([a-zA-Z_$][\w_$]*)\[c\]\)/;
  192.             var fnString = yt.player.Application.create.toString();
  193.             var m = appCreateRegex.exec(fnString);
  194.             if (m) {
  195.                 var playerInstancesKey = m[4];
  196.                 ytwp.html5.playerInstances = YTApplication[playerInstancesKey];
  197.             } else {
  198.                 ytwp.error('Error trying to find playerInstancesKey.', fnString);
  199.             }
  200.             ytwp.html5.playerInstances = YTApplication[playerInstancesKey];
  201.         }
  202.  
  203.         return ytwp.html5.playerInstances;
  204.     };
  205.     ytwp.html5.getPlayerInstance = function() {
  206.         if (!ytwp.html5.app) {
  207.             var playerInstances = ytwp.html5.getPlayerInstances();
  208.             ytwp.log('playerInstances', playerInstances);
  209.             var appInstance = null;
  210.             var appInstanceKey = null;
  211.             Object.keys(playerInstances).forEach(function(key) {
  212.                 appInstanceKey = key;
  213.                 appInstance = playerInstances[key];
  214.             });
  215.             ytwp.html5.app = appInstance;
  216.         }
  217.         return ytwp.html5.app;
  218.     };
  219.     ytwp.html5.autohideControls = function() {
  220.         var moviePlayerElement = document.getElementById('movie_player');
  221.         if (!moviePlayerElement) return;
  222.         // ytwp.log(moviePlayerElement.classList);
  223.         removeClass(moviePlayerElement, 'autohide-controlbar autominimize-controls-aspect autohide-controls-fullscreenonly autohide-controls hide-controls-when-cued autominimize-progress-bar autominimize-progress-bar-fullscreenonly autohide-controlbar-fullscreenonly autohide-controls-aspect autohide-controls-fullscreen autominimize-progress-bar-non-aspect');
  224.         addClass(moviePlayerElement, 'autominimize-progress-bar autohide-controls hide-controls-when-cued');
  225.         // ytwp.log(moviePlayerElement.classList);
  226.     };
  227.     ytwp.html5.update = function() {
  228.         if (!ytwp.html5.playerInstances)
  229.             return;
  230.         for (var key in ytwp.html5.playerInstances) {
  231.             var playerInstance = ytwp.html5.playerInstances[key];
  232.             ytwp.html5.updatePlayerInstance(playerInstance);
  233.         }
  234.     };
  235.     ytwp.html5.replaceClientRect = function(app, moviePlayerKey, clientRectFnKey) {
  236.         var moviePlayer = app[moviePlayerKey];
  237.         ytwp.html5.moviePlayerElement = moviePlayer.element;
  238.         ytwp.html5.YTRect = moviePlayer[clientRectFnKey].call(moviePlayer).constructor;
  239.         moviePlayer[clientRectFnKey] = ytwp.html5.getPlayerRect;
  240.     };
  241.     ytwp.html5.setRectFn = function(app, moviePlayerKey, clientRectFnKey) {
  242.         ytwp.html5.moviePlayerElement = document.getElementById('movie_player');
  243.         var moviePlayer = app[moviePlayerKey];
  244.         ytwp.html5.YTRect = moviePlayer[clientRectFnKey].call(moviePlayer).constructor;
  245.         moviePlayer.constructor.prototype[clientRectFnKey] = ytwp.html5.getPlayerRect;
  246.     };
  247.     ytwp.html5.updatePlayerInstance = function(app) {
  248.         if (!app) {
  249.             return;
  250.         }
  251.  
  252.         var moviePlayerElement = document.getElementById('movie_player');
  253.         var moviePlayer = null;
  254.         var moviePlayerKey = null;
  255.  
  256.         // function (a,b){return this.isDisposed()?!1:this.R.P.apply(this.R,arguments)}
  257.         var applyFnRegex = /^function \(a,b\)\{return this\.isDisposed\(\)\?!1:this\.([a-zA-Z_$][\w_$]*)\.([a-zA-Z_$][\w_$]*)\.apply\(this\.([a-zA-Z_$][\w_$]*),arguments\)\}$/;
  258.         var applyFnKey = null;
  259.         var applyKey1 = null;
  260.         var applyKey2 = null;
  261.  
  262.         // function (a){var b=this.j.X(),c=n$.L.xb.call(this);a||"detailpage"!=b.ma||b.ib||b.experiments.T||(c.height+=30);return c}
  263.         // function (a){var b=this.app.X(),c=n$.M.xb.call(this);a||!JK(b)||b.ab||b.experiments.U||(c.height+=30);return c}
  264.         var clientRectFnRegex1 = /^(function \(a\)\{var b=this\.([a-zA-Z_$][\w_$]*)\.([a-zA-Z_$][\w_$]*)\(\)).*(\|\|\(c\.height\+=30\);return c})$/;
  265.         // function (){var a=this.A.U();if(window.matchMedia){if((a.wb||a.Fb)&&window.matchMedia("(width: "+window.innerWidth+"px) and (height: "+window.innerHeight+"px)").matches)return new H(window.innerWidth,window.innerHeight);if("detailpage"==a.ja&&"blazer"!=a.j&&!a.Fb){a=a.experiments.A;if(window.matchMedia(S6.C).matches)return new H(426,a?280:240);var b=this.A.ha;if(window.matchMedia(b?S6.o:S6.j).matches)return new H(1280,a?760:720);if(b||window.matchMedia(S6.A).matches)return new H(854,a?520:480);if(window.matchMedia(S6.B).matches)return new H(640,a?400:360)}}return new H(this.element.clientWidth,this.element.clientHeight)}
  266.         //     Tail: return new H(this.element.clientWidth,this.element.clientHeight)}
  267.         // function (){var a=this.app.T,b=Yh()==this.element;if(b&&Lp())return new g.ef(window.outerWidth,window.outerHeight);if(b||a.Xe){var c;window.matchMedia&&(a="(width: "+window.innerWidth+"px) and (height: "+window.innerHeight+"px)",this.F&&this.F.media==a||(this.F=window.matchMedia(a)),c=this.F&&this.F.matches);if(c)return new g.ef(window.innerWidth,window.innerHeight)}else if(this.N){if(a.experiments.ba("flex_theater_mode")&&this.app.fa||a.experiments.ba("player_scaling_360p_to_720p")&&this.da.matches)return new g.ef(this.element.clientWidth,this.element.clientHeight);if(this.N.matches)return new g.ef(426,240);a=this.app.fa;if((a?this.aa:this.$).matches)return new g.ef(1280,720);if(a||this.ca.matches)return new g.ef(854,480);if(this.fa.matches)return new g.ef(640,360)}return new g.ef(this.element.clientWidth,this.element.clientHeight)}
  268.         //     Tail: return new g.ef(this.element.clientWidth,this.element.clientHeight)}
  269.         var clientRectFnRegex2 = /^(function \()(.|\n)*(return new ([a-zA-Z_$][\w_$]*\.)?([a-zA-Z_$][\w_$]*)\(this\.element\.clientWidth,this\.element\.clientHeight\)})$/;
  270.         var clientRectFn = null;
  271.         var clientRectFnKey = null;
  272.  
  273.         var fnAlreadyReplacedCount = 0;
  274.  
  275.         for (var key1 in app) {
  276.             var val1 = app[key1];//console.log(key1, val1);
  277.             if (typeof val1 === 'object' && val1 !== null && val1.element === moviePlayerElement) {
  278.                 moviePlayer = val1;
  279.                 moviePlayerKey = key1;
  280.  
  281.                 for (var key2 in moviePlayer) {
  282.                     var val2 = moviePlayer[key2];//console.log(key1, key2, val2);
  283.                     if (typeof val2 === 'function') {
  284.                         var fnString = val2.toString();
  285.                         // console.log(fnString);
  286.                         if (clientRectFn === null && (clientRectFnRegex1.test(fnString) || clientRectFnRegex2.test(fnString))) {
  287.                             clientRectFn = val2;
  288.                             clientRectFnKey = key2;
  289.                         } else if (val2 === ytwp.html5.getPlayerRect) {
  290.                             fnAlreadyReplacedCount += 1;
  291.                             clientRectFn = val2;
  292.                             clientRectFnKey = key2;
  293.                         } else {
  294.                             // console.log(key1, key2, val2, '[Not Used]');
  295.                         }
  296.                     }
  297.                 }
  298.             } else if (typeof val1 === 'object' && val1 !== null && typeof val1.logEvent === 'function') {
  299.                 applyKey1 = key1;
  300.                 
  301.                 for (var key2 in val1) {
  302.                     var val2 = val1[key2];//console.log(key1, key2, val2);
  303.                     if (typeof val2 === 'function') {
  304.                         var fnString = val2.toString();
  305.                         // console.log(fnString);
  306.                         if (applyKey2 === null && applyFnRegex.test(fnString)) {
  307.                             applyKey2 = key2;
  308.                         }
  309.                     }
  310.                 }
  311.             } else if (typeof val1 === 'function') {
  312.                 var fnString = val1.toString();
  313.                 if (applyFnRegex.test(fnString)) {
  314.                     applyFnKey = key1;
  315.                 }
  316.             }
  317.         }
  318.  
  319.         if (fnAlreadyReplacedCount > 0) {
  320.             // return;
  321.         }
  322.  
  323.         if (moviePlayer === null || clientRectFn === null) {
  324.             console.log('[ytwp] ', '[Error]', 'HTML5 Player has changed or there\'s multiple playerInstances and this one has been destroyed.');
  325.             console.log('moviePlayer', moviePlayerKey, moviePlayer);
  326.             console.log('clientRectFn', clientRectFnKey, clientRectFn);
  327.             console.log('fnAlreadyReplacedCount', fnAlreadyReplacedCount);
  328.             if (moviePlayer === null) {
  329.                 console.log('Debugging: moviePlayer');
  330.                 var table = [];
  331.                 Object.keys(app).forEach(function(key1) {
  332.                     var val1 = app[key1];
  333.                     table.push({
  334.                         key: key1,
  335.                         element: typeof val1 === 'object' && val1 !== null && val1.element === moviePlayerElement,
  336.                         val: val1,
  337.                     });
  338.                 });
  339.                 console.table(table);
  340.             }
  341.             if (moviePlayer != null) {
  342.                 console.log('Debugging: clientRectFn');
  343.                 var table = [];
  344.                 for (var key2 in moviePlayer) {
  345.                     var val2 = moviePlayer[key2];
  346.                     table.push({
  347.                         key: key2,
  348.                         returns: moviePlayer[key2] && moviePlayer[key2].toString().indexOf('return'),
  349.                         src: moviePlayer[key2] && moviePlayer[key2].toString(),
  350.                     });
  351.                 }
  352.                 console.table(table);
  353.             }
  354.             return;
  355.         }
  356.         
  357.         ytwp.html5.setRectFn(app, moviePlayerKey, clientRectFnKey);
  358.  
  359.         if (applyFnKey) { // Probably not needed.
  360.             ytwp.log('applyFnKey', applyFnKey);
  361.             app[applyFnKey]('resize', ytwp.html5.getPlayerRect());
  362.         } else if (applyKey1 && applyKey2) {
  363.             ytwp.log('applyKey', applyKey1, applyKey2);
  364.             app[applyKey1][applyKey2]('resize', ytwp.html5.getPlayerRect());
  365.         } else {
  366.             ytwp.log('applyFn not found');
  367.             //app.oa.T('resize', ytwp.html5.getPlayerRect()); // tempfix
  368.         }
  369.     };
  370.  
  371.  
  372.  
  373.     ytwp.event = {
  374.         init: function() {
  375.             ytwp.log('init');
  376.             if (!ytwp.initialized) {
  377.                 ytwp.isWatchPage = ytwp.util.isWatchUrl();
  378.                 if (ytwp.isWatchPage) {
  379.                     if (!document.getElementById(scriptStyleId)) {
  380.                         ytwp.event.initStyle();
  381.                     }
  382.                     ytwp.event.initScroller();
  383.                     ytwp.initialized = true;
  384.                     ytwp.pageReady = false;
  385.                 }
  386.             }
  387.             ytwp.event.onWatchInit();
  388.             if (ytwp.isWatchPage) {
  389.                 ytwp.event.html5PlayerFix();
  390.             }
  391.         },
  392.         initScroller: function() {
  393.             // Register listener & Call it now.
  394.             uw.addEventListener('scroll', ytwp.event.onScroll, false);
  395.             uw.addEventListener('resize', ytwp.event.onScroll, false);
  396.             ytwp.event.onScroll();
  397.         },
  398.         onScroll: function() {
  399.             var viewportHeight = document.documentElement.clientHeight;
  400.  
  401.             // topOfPageClassId
  402.             if (uw.scrollY == 0) {
  403.                 document.body.classList.add(topOfPageClassId);
  404.                 //var player = document.getElementById('movie_player');
  405.                 //if (player)
  406.                 //    player.focus();
  407.             } else {
  408.                 document.body.classList.remove(topOfPageClassId);
  409.             }
  410.  
  411.             // viewingVideoClassId
  412.             if (uw.scrollY <= viewportHeight) {
  413.                 document.body.classList.add(viewingVideoClassId);
  414.             } else {
  415.                 document.body.classList.remove(viewingVideoClassId);
  416.             }
  417.         },
  418.         initStyle: function() {
  419.             ytwp.log('initStyle');
  420.             ytwp.style = new JSStyleSheet(scriptStyleId);
  421.             ytwp.event.buildStylesheet();
  422.             // Duplicate stylesheet targeting data-spf-name if enabled.
  423.             if (uw.spf) {
  424.                 var temp = scriptBodyClassSelector;
  425.                 scriptBodyClassSelector = 'body[data-spf-name="watch"]';
  426.                 ytwp.event.buildStylesheet();
  427.                 ytwp.style.appendRule('body[data-spf-name="watch"]:not(.ytwp-window-player) #masthead-positioner',  {
  428.                     'position': 'absolute',
  429.                     'top': '100% !important'
  430.                 });
  431.             }
  432.             ytwp.style.injectIntoHeader();
  433.         },
  434.         buildStylesheet: function() {
  435.             ytwp.log('buildStylesheet');
  436.             //--- Video Player
  437.             var d;
  438.             d = buildVenderPropertyDict(transitionProperties, 'left 0s linear, padding-left 0s linear');
  439.             d['padding'] = '0 !important';
  440.             d['margin'] = '0 !important';
  441.             ytwp.style.appendRule([
  442.                 scriptBodyClassSelector + ' #player',
  443.                 scriptBodyClassSelector + '.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible #player',
  444.                 scriptBodyClassSelector + '.ltr.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible.guide-collapsed #player',
  445.                 scriptBodyClassSelector + '.ltr.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible.guide-collapsed #player-legacy',
  446.                 scriptBodyClassSelector + '.ltr.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible.guide-collapsed #watch7-main-container',
  447.             ], d);
  448.             //
  449.             d = buildVenderPropertyDict(transitionProperties, 'width 0s linear, left 0s linear');
  450.  
  451.             // Bugfix for Firefox
  452.             // Parts of the header (search box) are hidden under the player.
  453.             // Firefox doesn't seem to be using the fixed header+guide yet.
  454.             d['float'] = 'initial';
  455.  
  456.             // Skinny mode
  457.             d['left'] = 0;
  458.             d['margin-left'] = 0;
  459.  
  460.             ytwp.style.appendRule(scriptBodyClassSelector + ' #player-api', d);
  461.  
  462.             // Theatre mode
  463.             ytwp.style.appendRule(scriptBodyClassSelector + ' .watch-stage-mode #player .player-api', {
  464.                 'left': 'initial',
  465.                 'margin-left': 'initial',
  466.             });
  467.             
  468.             // Hide the cinema/wide mode button since it's useless.
  469.             //ytwp.style.appendRule(scriptBodyClassSelector + ' #movie_player .ytp-size-button', 'display', 'none');
  470.             
  471.                 
  472.  
  473.             // !important is mainly for simplicity, but is needed to override the !important styling when the Guide is open due to:
  474.             // .sidebar-collapsed #watch7-video, .sidebar-collapsed #watch7-main, .sidebar-collapsed .watch7-playlist { width: 945px!important; }
  475.             // Also, Youtube Center resizes #player at element level.
  476.             // Don't resize if Youtube+'s html.floater is detected.
  477.             ytwp.style.appendRule(
  478.                 [
  479.                     scriptBodyClassSelector + ' #player',
  480.                     scriptBodyClassSelector + ' #player-api',
  481.                     'html:not(.floater) ' + scriptBodyClassSelector + ' #movie_player',
  482.                     scriptBodyClassSelector + ' #player-mole-container',
  483.                     'html:not(.floater) ' + scriptBodyClassSelector + ' .html5-video-container',
  484.                     'html:not(.floater) ' + scriptBodyClassSelector + ' .html5-main-video',
  485.                 ],
  486.                 {
  487.                     'width': '100% !important',
  488.                     'min-width': '100% !important',
  489.                     'max-width': '100% !important',
  490.                     'height': '100% !important',
  491.                     'min-height': '100% !important',
  492.                     'max-height': '100% !important',
  493.                 }
  494.             );
  495.  
  496.              ytwp.style.appendRule(
  497.                 [
  498.                     scriptBodyClassSelector + ' #player',
  499.                     scriptBodyClassSelector + ' .html5-main-video',
  500.                 ],
  501.                 {
  502.                     'top': '0 !important',
  503.                     'right': '0 !important',
  504.                     'bottom': '0 !important',
  505.                     'left': '0 !important',
  506.                 }
  507.             );
  508.             // Resize #player-unavailable, #player-api
  509.             // Using min/max width/height will keep
  510.             ytwp.style.appendRule(scriptBodyClassSelector + ' #player .player-width', 'width', '100% !important');
  511.             ytwp.style.appendRule(scriptBodyClassSelector + ' #player .player-height', 'height', '100% !important');
  512.  
  513.             // Fix video overlays
  514.             ytwp.style.appendRule([
  515.                 scriptBodyClassSelector + ' .html5-video-player .ad-container-single-media-element-annotations', // Ad
  516.                 scriptBodyClassSelector + ' .html5-video-player .ytp-upnext', // Autoplay Next Video
  517.             ], 'top', '0');
  518.             
  519.  
  520.             //--- Move Video Player
  521.             ytwp.style.appendRule(scriptBodyClassSelector + ' #player', {
  522.                 'position': 'absolute',
  523.                 // Already top:0; left: 0;
  524.             });
  525.             ytwp.style.appendRule(scriptBodyClassSelector, { // body
  526.                 'margin-top': '100vh',
  527.             });
  528.  
  529.  
  530.             //--- Sidebar
  531.             // Remove the transition delay as you can see it moving on page load.
  532.             d = buildVenderPropertyDict(transitionProperties, 'margin-top 0s linear, padding-top 0s linear');
  533.             d['margin-top'] = '0 !important';
  534.             d['top'] = '0 !important';
  535.             ytwp.style.appendRule(scriptBodyClassSelector + ' #watch7-sidebar', d);
  536.  
  537.             ytwp.style.appendRule(scriptBodyClassSelector + '.cardified-page #watch7-sidebar-contents', 'padding-top', '0');
  538.  
  539.             //--- Absolutely position the fixed header.
  540.             // Masthead
  541.             d = buildVenderPropertyDict(transitionProperties, 'top 0s linear !important');
  542.             ytwp.style.appendRule(scriptBodyClassSelector + '.hide-header-transition #masthead-positioner', d);
  543.             ytwp.style.appendRule(scriptBodyClassSelector + '.' + viewingVideoClassId + ' #masthead-positioner', {
  544.                 'position': 'absolute',
  545.                 'top': '100% !important'
  546.             });
  547.             // Fix the offset when closing the Share widget (element.style.height = ~275px).
  548.             ytwp.style.appendRule(scriptBodyClassSelector + '.appbar-hidden #masthead-positioner-height-offset', 'height', '50px !important');
  549.             ytwp.style.appendRule(scriptBodyClassSelector + ' #masthead-positioner-height-offset', 'height', '90px !important');
  550.             // Lower masthead below Youtube+'s html.floater
  551.             ytwp.style.appendRule('html.floater ' + scriptBodyClassSelector + '.' + viewingVideoClassId + ' #masthead-positioner', {
  552.                 'z-index': '5',
  553.             });
  554.  
  555.             // Guide
  556.             // When watching the video, we need to line it up with the masthead.
  557.             ytwp.style.appendRule(scriptBodyClassSelector + '.' + viewingVideoClassId + ' #appbar-guide-menu', {
  558.                 'display': 'initial',
  559.                 'position': 'absolute',
  560.                 'top': '100% !important' // Masthead height
  561.             });
  562.             ytwp.style.appendRule(scriptBodyClassSelector + '.' + viewingVideoClassId + ' #page.watch #guide', {
  563.                 'display': 'initial',
  564.                 'margin': '0',
  565.                 'position': 'initial'
  566.             });
  567.  
  568.             //---
  569.             // Hide Scrollbars
  570.             ytwp.style.appendRule(scriptBodyClassSelector + '.' + topOfPageClassId, 'overflow-x', 'hidden');
  571.  
  572.  
  573.             //--- Fix Other Possible Style Issues
  574.             ytwp.style.appendRule(scriptBodyClassSelector + ' #placeholder-player', 'display', 'none');
  575.             ytwp.style.appendRule(scriptBodyClassSelector + ' #watch-sidebar-spacer', 'display', 'none');
  576.             ytwp.style.appendRule(scriptBodyClassSelector + ' .skip-nav', 'display', 'none');
  577.  
  578.             //--- Whitespace Leftover From Moving The Video
  579.             ytwp.style.appendRule(scriptBodyClassSelector + ' #page.watch', 'padding-top', '0');
  580.             ytwp.style.appendRule(scriptBodyClassSelector + ' .player-branded-banner', 'height', '0');
  581.  
  582.             //--- Youtube+ Compatiblity
  583.             ytwp.style.appendRule(scriptBodyClassSelector + ' #body-container', 'position', 'static');
  584.             ytwp.style.appendRule('.part_static_size:not(.content-snap-width-skinny-mode) ' + scriptBodyClassSelector + ' .watch-non-stage-mode #player-playlist', 'width', '1066px');
  585.  
  586.             //--- Playlist Bar
  587.             ytwp.style.appendRule([
  588.                 scriptBodyClassSelector + ' #placeholder-playlist',
  589.                 scriptBodyClassSelector + ' #player .player-height#watch-appbar-playlist',
  590.             ], {
  591.                 'height': '540px !important',
  592.                 'max-height': '540px !important',
  593.             });
  594.  
  595.             d = buildVenderPropertyDict(transitionProperties, 'transform 0s linear');
  596.             ytwp.style.appendRule(scriptBodyClassSelector + ' #watch-appbar-playlist', d);
  597.             d = buildVenderPropertyDict(transformProperties, 'translateY(0px)');
  598.             d['margin-left'] = '0';
  599.             d['top'] = 'calc(100vh + 60px)';
  600.             ytwp.style.appendRule(scriptBodyClassSelector + ' #player .player-height#watch-appbar-playlist', d);
  601.             ytwp.style.appendRule(scriptBodyClassSelector + ' .playlist-videos-list', {
  602.                 'max-height': '470px !important',
  603.                 'height': 'initial !important',
  604.             });
  605.         },
  606.         onWatchInit: function() {
  607.             ytwp.log('onWatchInit');
  608.             if (!ytwp.initialized) return;
  609.             if (ytwp.pageReady) return;
  610.  
  611.             ytwp.event.addBodyClass();
  612.             ytwp.pageReady = true;
  613.         },
  614.         onDispose: function() {
  615.             ytwp.log('onDispose');
  616.             ytwp.initialized = false;
  617.             ytwp.pageReady = false;
  618.             ytwp.isWatchPage = false;
  619.             ytwp.html5.app = null;
  620.             // ytwp.html5.YTRect = null;
  621.             ytwp.html5.YTApplication = null;
  622.             ytwp.html5.playerInstances = null;
  623.             //ytwp.html5.moviePlayerElement = null;
  624.         },
  625.         addBodyClass: function() {
  626.             // Insert CSS Into the body so people can style around the effects of this script.
  627.             document.body.classList.add(scriptBodyClassId);
  628.             ytwp.log('Applied ' + scriptBodyClassSelector);
  629.         },
  630.         html5PlayerFix: function() {
  631.             ytwp.log('html5PlayerFix');
  632.  
  633.             try {
  634.                 if (!uw.ytcenter // Youtube Center
  635.                     && !uw.html5Patched // Youtube+
  636.                     && (!ytwp.html5.app)
  637.                     && (uw.ytplayer && uw.ytplayer.config)
  638.                     && (uw.yt && uw.yt.player && uw.yt.player.Application && uw.yt.player.Application.create)
  639.                 ) {
  640.                     ytwp.html5.app = ytwp.html5.getPlayerInstance();
  641.                 }
  642.  
  643.                 ytwp.html5.update();
  644.                 ytwp.html5.autohideControls();
  645.             } catch (e) {
  646.                 ytwp.error(e);
  647.             }
  648.         },
  649.  
  650.     };
  651.  
  652.  
  653.     ytwp.pubsubListeners = {
  654.         'init': function() { // Not always called
  655.             ytwp.event.init();
  656.         },
  657.         'init-watch': function() { // Not always called
  658.             ytwp.event.init();
  659.         },
  660.         'player-added': function() { // Not always called
  661.             // Usually called after init-watch, however this is called before init when going from channel -> watch page.
  662.             // The init event is when the body element resets all it's classes.
  663.             ytwp.event.init();
  664.         },
  665.         // 'player-resize': function() {},
  666.         // 'player-playback-start': function() {},
  667.         'appbar-guide-delay-load': function() {
  668.             // Listen to a later event that is always called in case the others are missed.
  669.             ytwp.event.init();
  670.  
  671.             // Channel -> /watch
  672.             if (ytwp.util.isWatchUrl())
  673.                 ytwp.event.addBodyClass();
  674.         },
  675.         // 'dispose-watch': function() {},
  676.         'dispose': function() {
  677.             ytwp.event.onDispose();
  678.         }
  679.     };
  680.  
  681.     ytwp.registerYoutubeListeners = function() {
  682.         ytwp.registerYoutubePubSubListeners();
  683.     };
  684.  
  685.     ytwp.registerYoutubePubSubListeners = function() {
  686.         // Subscribe
  687.         for (var eventName in ytwp.pubsubListeners) {
  688.             var eventListener = ytwp.pubsubListeners[eventName];
  689.             uw.yt.pubsub.instance_.subscribe(eventName, eventListener);
  690.         }
  691.     };
  692.  
  693.     ytwp.main = function() {
  694.         try {
  695.             ytwp.registerYoutubeListeners();
  696.         } catch(e) {
  697.             ytwp.error("Could not hook yt.pubsub", e);
  698.             setTimeout(ytwp.main, 1000);
  699.         }
  700.         ytwp.event.init();
  701.     };
  702.  
  703.     ytwp.main();
  704.     
  705. })(typeof unsafeWindow !== 'undefined' ? unsafeWindow : window);