☰

Resize YT To Window Size

Moves the YouTube video to the top of the website and fill the window with the video player.

As of 2017-04-15. See the latest version.

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