☰

Resize YT To Window Size

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

目前为 2016-03-27 提交的版本。查看 最新版本。

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