☰

Resize YT To Window Size

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

当前为 2014-10-31 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name            Resize YT To Window Size
  3. // @description     Moves the video to the top of the website and resizes it to the screen 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         1.43
  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://gf.qytechs.cn/scripts/811-resize-yt-to-window-size
  17. // OpenUserJS.org:  https://openuserjs.org/scripts/zren/httpxshade.ca/Resize_YT_To_Window_Size
  18. // Userscripts.org: http://userscripts.org:8080/scripts/show/153699
  19.  
  20. (function (window) {
  21.     "use strict";
  22.     
  23.     //--- Imported Globals
  24.     // yt
  25.     // ytcenter
  26.     // ytplayer
  27.     var uw = window.top;
  28.  
  29.     //--- Already Loaded?
  30.     // GreaseMonkey loads this script twice for some reason.
  31.     if (uw.ytwp) return;
  32.  
  33.     //--- Utils
  34.     function isStringType(obj) { return typeof obj === 'string'; }
  35.     function isArrayType(obj) { return obj instanceof Array; }
  36.     function isObjectType(obj) { return typeof obj === 'object'; }
  37.     function isUndefined(obj) { return typeof obj === 'undefined'; }
  38.     function buildVenderPropertyDict(propertyNames, value) {
  39.         var d = {};
  40.         for (var i in propertyNames)
  41.             d[propertyNames[i]] = value;
  42.         return d;
  43.     }
  44.  
  45.     //--- jQuery
  46.     // Based on jQuery
  47.     // https://github.com/jquery/jquery/blob/master/src/manipulation.js
  48.     var core_rnotwhite = /\S+/g;
  49.     var rclass = /[\t\r\n\f]/g;
  50.     var rtrim = /^(\s|\u00A0)+|(\s|\u00A0)+$/g;
  51.  
  52.     var jQuery = {
  53.         trim: function( text ) {
  54.             return (text || "").replace( rtrim, "" );
  55.         },
  56.         addClass: function( elem, value ) {
  57.             var classes, cur, clazz, j,
  58.                 proceed = typeof value === "string" && value;
  59.  
  60.             if ( proceed ) {
  61.                 // The disjunction here is for better compressibility (see removeClass)
  62.                 classes = ( value || "" ).match( core_rnotwhite ) || [];
  63.  
  64.                 cur = elem.nodeType === 1 && ( elem.className ?
  65.                     ( " " + elem.className + " " ).replace( rclass, " " ) :
  66.                     " "
  67.                 );
  68.  
  69.                 if ( cur ) {
  70.                     j = 0;
  71.                     while ( (clazz = classes[j++]) ) {
  72.                         if ( cur.indexOf( " " + clazz + " " ) < 0 ) {
  73.                             cur += clazz + " ";
  74.                         }
  75.                     }
  76.                     elem.className = jQuery.trim( cur );
  77.                 }
  78.             }
  79.         },
  80.         removeClass: function( elem, value ) {
  81.             var classes, cur, clazz, j,
  82.                 proceed = arguments.length === 0 || typeof value === "string" && value;
  83.  
  84.             if ( proceed ) {
  85.                 classes = ( value || "" ).match( core_rnotwhite ) || [];
  86.  
  87.                 // This expression is here for better compressibility (see addClass)
  88.                 cur = elem.nodeType === 1 && ( elem.className ?
  89.                     ( " " + elem.className + " " ).replace( rclass, " " ) :
  90.                     ""
  91.                 );
  92.  
  93.                 if ( cur ) {
  94.                     j = 0;
  95.                     while ( (clazz = classes[j++]) ) {
  96.                         // Remove *all* instances
  97.                         while ( cur.indexOf( " " + clazz + " " ) >= 0 ) {
  98.                             cur = cur.replace( " " + clazz + " ", " " );
  99.                         }
  100.                     }
  101.                     elem.className = value ? jQuery.trim( cur ) : "";
  102.                 }
  103.             }
  104.         }
  105.     };
  106.  
  107.  
  108.     //--- Stylesheet
  109.     var JSStyleSheet = function(id) {
  110.         this.id = id;
  111.         this.stylesheet = '';
  112.     };
  113.  
  114.     JSStyleSheet.prototype.buildRule = function(selector, styles) {
  115.         var s = "";
  116.         for (var key in styles) {
  117.             s += "\t" + key + ": " + styles[key] + ";\n";
  118.         }
  119.         return selector + " {\n" + s + "}\n";
  120.     };
  121.  
  122.     JSStyleSheet.prototype.appendRule = function(selector, k, v) {
  123.         if (isArrayType(selector))
  124.             selector = selector.join(',\n');
  125.         var newStyle;
  126.         if (!isUndefined(k) && !isUndefined(v) && isStringType(k)) { // v can be any type (as we stringify it).
  127.             // appendRule('#blarg', 'display', 'none');
  128.             var d = {};
  129.             d[k] = v;
  130.             newStyle = this.buildRule(selector, d);
  131.         } else if (!isUndefined(k) && isUndefined(v) && isObjectType(k)) {
  132.             // appendRule('#blarg', {'display': 'none'});
  133.             newStyle = this.buildRule(selector, k);
  134.         } else {
  135.             // Invalid Arguments
  136.             console.log('Illegal arguments', arguments);
  137.             return;
  138.         }
  139.  
  140.         this.stylesheet += newStyle;
  141.     };
  142.  
  143.     JSStyleSheet.injectIntoHeader = function(injectedStyleId, stylesheet) {
  144.         var styleElement = document.getElementById(injectedStyleId);
  145.         if (!styleElement) {
  146.             styleElement = document.createElement('style');
  147.             styleElement.type = 'text/css';
  148.             styleElement.id = injectedStyleId;
  149.             document.getElementsByTagName('head')[0].appendChild(styleElement);
  150.         }
  151.         styleElement.appendChild(document.createTextNode(stylesheet));
  152.     };
  153.  
  154.     JSStyleSheet.prototype.injectIntoHeader = function(injectedStyleId, stylesheet) {
  155.         JSStyleSheet.injectIntoHeader(this.id, this.stylesheet);
  156.     };
  157.  
  158.     //---
  159.     // Credits to https://github.com/YePpHa/YouTubeCenter/
  160.     // Needed to fix the HTML5 Player progress bar.
  161.     // https://github.com/YePpHa/YouTubeCenter/compare/782812243a99e33e07fe443ef71d127d0917ed81...a81856b974603a1645e567ee6ac91e6856c529c8
  162.     var ytcenter_player_experiments = (function(){
  163.         function add(exp, config) {
  164.             var cfg = getConfig(config);
  165.             if (!has(exp, config)) {
  166.                 cfg.args.fexp += "," + exp;
  167.             }
  168.         }
  169.         function remove(exp, config) {
  170.             var cfg = getConfig(config);
  171.             if (cfg && cfg.args && cfg.args.fexp) {
  172.                 var e = cfg.args.fexp.split(","), i, a = [];
  173.                 for (i = 0; i < e.length; i++) {
  174.                     if (exp !== e[i]) {
  175.                         a.push(e[i]);
  176.                     }
  177.                 }
  178.                 cfg.args.fexp = a.join(",");
  179.             }
  180.         }
  181.         function has(exp, config) {
  182.             var cfg = getConfig(config);
  183.             if (cfg && cfg.args && typeof cfg.fexp === "string") {
  184.                 var e = cfg.args.fexp.split(","), i, a = [];
  185.                 for (i = 0; i < e.length; i++) {
  186.                     if (exp === e[i]) {
  187.                         return true;
  188.                     }
  189.                 }
  190.             }
  191.             return false;
  192.         }
  193.         function clear(config) {
  194.             var cfg = getConfig(config);
  195.             if (cfg && cfg.args) {
  196.                 cfg.args.fexp = "";
  197.             }
  198.         }
  199.         function getConfig(config) {
  200.             return config || ytcenter.player.config.args;
  201.         }
  202.         
  203.         return { add: add, remove: remove, has: has, clear: clear };
  204.     })();
  205.  
  206.     //--- Constants
  207.     var scriptShortName = 'ytwp'; // YT Window Player
  208.     var scriptStyleId = scriptShortName + '-style'; // ytwp-style
  209.     var scriptBodyClassId = scriptShortName + '-window-player'; // .ytwp-window-player
  210.     var viewingVideoClassId = scriptShortName + '-viewing-video'; // .ytwp-viewing-video
  211.     var topOfPageClassId = scriptShortName + '-scrolltop'; // .ytwp-scrolltop
  212.     var scriptBodyClassSelector = 'body.' + scriptBodyClassId; // body.ytwp-window-player
  213.  
  214.     var videoContainerId = 'player';
  215.     var videoContainerPlacemarkerId = scriptShortName + '-placemarker'; // ytwp-placemarker
  216.  
  217.     var transitionProperties = ["transition", "-ms-transition", "-moz-transition", "-webkit-transition", "-o-transition"];
  218.  
  219.     //--- YTWP
  220.     var ytwp = uw.ytwp = {
  221.         scriptShortName: scriptShortName, // YT Window Player
  222.         log_: function(logger, args) { logger.apply(console, ['[' + this.scriptShortName + '] '].concat(Array.prototype.slice.call(args))); return 1; },
  223.         log: function() { return this.log_(console.log, arguments); },
  224.         error: function() { return this.log_(console.error, arguments); },
  225.  
  226.         initialized: false,
  227.         pageReady: false,
  228.         watchPage: false,
  229.     };
  230.  
  231.     ytwp.util = {
  232.         isWatchUrl: function (url) {
  233.             if (!url)
  234.                 url = uw.location.href;
  235.             return url.match(/https?:\/\/(www\.)?youtube.com\/watch\?/);
  236.         }
  237.     };
  238.  
  239.     ytwp.event = {
  240.         init: function() {
  241.             ytwp.log('init');
  242.             if (ytwp.initialized) return;
  243.  
  244.             ytwp.isWatchPage = ytwp.util.isWatchUrl();
  245.             if (!ytwp.isWatchPage) return;
  246.  
  247.             ytwp.event.initStyle();
  248.             ytwp.event.initScroller();
  249.             ytwp.initialized = true;
  250.             ytwp.pageReady = false;
  251.         },
  252.         initScroller: function() {
  253.             // Register listener & Call it now.
  254.             unsafeWindow.addEventListener('scroll', ytwp.event.onScroll, false);
  255.             unsafeWindow.addEventListener('resize', ytwp.event.onScroll, false);
  256.             ytwp.event.onScroll();
  257.         },
  258.         onScroll: function() {
  259.             var viewportHeight = document.documentElement.clientHeight;
  260.  
  261.             // topOfPageClassId
  262.             if (unsafeWindow.scrollY == 0) {
  263.                 jQuery.addClass(document.body, topOfPageClassId);
  264.             } else {
  265.                 jQuery.removeClass(document.body, topOfPageClassId);
  266.             }
  267.  
  268.             // viewingVideoClassId
  269.             if (unsafeWindow.scrollY <= viewportHeight) {
  270.                 jQuery.addClass(document.body, viewingVideoClassId);
  271.             } else {
  272.                 jQuery.removeClass(document.body, viewingVideoClassId);
  273.             }
  274.         },
  275.         initStyle: function() {
  276.             ytwp.log('initStyle');
  277.             ytwp.style = new JSStyleSheet(scriptStyleId);
  278.             ytwp.event.buildStylesheet();
  279.             ytwp.style.injectIntoHeader();
  280.         },
  281.         buildStylesheet: function() {
  282.             ytwp.log('buildStylesheet');
  283.             //--- Video Player
  284.  
  285.             //
  286.             var d;
  287.             d = buildVenderPropertyDict(transitionProperties, 'left 0s linear, padding-left 0s linear');
  288.             d['padding'] = '0 !important';
  289.             d['margin'] = '0 !important';
  290.             ytwp.style.appendRule([
  291.                 scriptBodyClassSelector + ' #player',
  292.                 scriptBodyClassSelector + '.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible #player',
  293.                 scriptBodyClassSelector + '.ltr.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible.guide-collapsed #player',
  294.                 scriptBodyClassSelector + '.ltr.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible.guide-collapsed #player-legacy',
  295.                 scriptBodyClassSelector + '.ltr.ytcenter-site-center.ytcenter-non-resize.ytcenter-guide-visible.guide-collapsed #watch7-main-container',
  296.             ], d);
  297.             //
  298.             d = buildVenderPropertyDict(transitionProperties, 'width 0s linear, left 0s linear');
  299.  
  300.             // Bugfix for Firefox
  301.             // Parts of the header (search box) are hidden under the player.
  302.             // Firefox doesn't seem to be using the fixed header+guide yet.
  303.             d['float'] = 'initial';
  304.  
  305.             ytwp.style.appendRule(scriptBodyClassSelector + ' #player-api', d);
  306.  
  307.             // !important is mainly for simplicity, but is needed to override the !important styling when the Guide is open due to:
  308.             // .sidebar-collapsed #watch7-video, .sidebar-collapsed #watch7-main, .sidebar-collapsed .watch7-playlist { width: 945px!important; }
  309.             // Also, Youtube Center resizes #player at element level.
  310.             ytwp.style.appendRule(
  311.                 [
  312.                     scriptBodyClassSelector + ' #player',
  313.                     scriptBodyClassSelector + ' #movie_player',
  314.                     scriptBodyClassSelector + ' #player-mole-container',
  315.                     scriptBodyClassSelector + ' .html5-main-video',
  316.                 ],
  317.                 {
  318.                     'width': '100% !important',
  319.                     'min-width': '100% !important',
  320.                     'max-width': '100% !important',
  321.                     'height': '100% !important',
  322.                     'min-height': '100% !important',
  323.                     'max-height': '100% !important',
  324.                 }
  325.             );
  326.  
  327.              ytwp.style.appendRule(
  328.                 [
  329.                     scriptBodyClassSelector + ' #player',
  330.                     scriptBodyClassSelector + ' .html5-main-video',
  331.                 ],
  332.                 {
  333.                     'top': '0 !important',
  334.                     'right': '0 !important',
  335.                     'bottom': '0 !important',
  336.                     'left': '0 !important',
  337.                 }
  338.             );
  339.             // Resize #player-unavailable, #player-api
  340.             // Using min/max width/height will keep
  341.             ytwp.style.appendRule(scriptBodyClassSelector + ' #player .player-width', 'width', '100% !important');
  342.             ytwp.style.appendRule(scriptBodyClassSelector + ' #player .player-height', 'height', '100% !important');
  343.  
  344.             //--- Move Video Player
  345.             ytwp.style.appendRule(scriptBodyClassSelector + ' #player', {
  346.                 'position': 'absolute',
  347.                 // Already top:0; left: 0;
  348.             });
  349.             ytwp.style.appendRule(scriptBodyClassSelector, { // body
  350.                 'margin-top': '100vh',
  351.             });
  352.  
  353.  
  354.             //--- Sidebar
  355.             // Remove the transition delay as you can see it moving on page load.
  356.             d = buildVenderPropertyDict(transitionProperties, 'margin-top 0s linear, padding-top 0s linear');
  357.             d['margin-top'] = '0 !important';
  358.             d['top'] = '0 !important';
  359.             ytwp.style.appendRule(scriptBodyClassSelector + ' #watch7-sidebar', d);
  360.  
  361.             ytwp.style.appendRule(scriptBodyClassSelector + '.cardified-page #watch7-sidebar-contents', 'padding-top', '0');
  362.  
  363.             //--- Absolutely position the fixed header.
  364.             // Masthead
  365.             ytwp.style.appendRule(scriptBodyClassSelector + '.' + viewingVideoClassId + ' #masthead-positioner', {
  366.                 'position': 'absolute',
  367.                 'top': '100% !important'
  368.             });
  369.  
  370.             // Guide
  371.             // When watching the video, we need to line it up with the masthead.
  372.             ytwp.style.appendRule(scriptBodyClassSelector + '.' + viewingVideoClassId + ' #appbar-guide-menu', {
  373.                 'display': 'initial',
  374.                 'position': 'absolute',
  375.                 'top': '100% !important' // Masthead height
  376.             });
  377.             ytwp.style.appendRule(scriptBodyClassSelector + '.' + viewingVideoClassId + ' #page.watch #guide', {
  378.                 'display': 'initial',
  379.                 'margin': '0',
  380.                 'position': 'initial'
  381.             });
  382.  
  383.             //---
  384.             // Hide Scrollbars
  385.             ytwp.style.appendRule(scriptBodyClassSelector + '.' + topOfPageClassId, 'overflow-x', 'hidden');
  386.  
  387.  
  388.             //--- Fix Other Possible Style Issues
  389.  
  390.             //--- Whitespace Leftover From Moving The Video
  391.             ytwp.style.appendRule(scriptBodyClassSelector + ' #page.watch', 'padding-top', '0');
  392.             ytwp.style.appendRule(scriptBodyClassSelector + ' .player-branded-banner', 'height', '0');
  393.  
  394.             //--- Playlist Bar
  395.             //ytwp.style.appendRule(scriptBodyClassSelector + ' #watch7-playlist-tray-container', "margin", "-15px -10px 20px -10px");
  396.             ytwp.style.appendRule(scriptBodyClassSelector + ' .watch7-playlist-bar-left', 'width', '640px !important'); // Same width as .watch-content
  397.             ytwp.style.appendRule([
  398.                 scriptBodyClassSelector + ' .playlist',
  399.                 scriptBodyClassSelector + ' .playlist .watch7-playlist-bar',
  400.             ], 'max-width', '1040px'); // Same width as .watch-content (640px) + .watch-sidebar (300-400px).
  401.             ytwp.style.appendRule(scriptBodyClassSelector + ' #watch7-playlist-tray-container', {
  402.                 "margin-top": "-15px",
  403.                 "height": "287px !important", // 65 (playlist tile) * 4 + 27 (trim on bottom)
  404.                 "margin-bottom": "15px"
  405.             });
  406.             ytwp.style.appendRule([
  407.                 scriptBodyClassSelector + '.cardified-page #watch7-playlist-tray-container + #watch7-sidebar-contents', // Pre Oct 26
  408.                 scriptBodyClassSelector + '.cardified-page #watch-appbar-playlist + #watch7-sidebar-contents', // Post Oct 26
  409.             ], 'padding-top', '15px');
  410.  
  411.             // YT Center
  412.             ytwp.style.appendRule(scriptBodyClassSelector + ' #player', 'margin-bottom', '0 !important');
  413.             ytwp.style.appendRule(scriptBodyClassSelector + ' #watch7-playlist-tray-container', {
  414.                 'left': 'initial !important',
  415.                 'width': 'initial !important'
  416.             });
  417.             ytwp.style.appendRule(scriptBodyClassSelector + ' .watch7-playlist-bar-right', 'width', '363px !important');
  418.         },
  419.         onWatchInit: function() {
  420.             ytwp.log('onWatchInit');
  421.             if (!ytwp.initialized) return;
  422.             if (ytwp.pageReady) return;
  423.  
  424.             ytwp.event.addBodyClass();
  425.             ytwp.pageReady = true;
  426.         },
  427.         onDispose: function() {
  428.             ytwp.initialized = false;
  429.             ytwp.pageReady = false;
  430.             ytwp.isWatchPage = false;
  431.         },
  432.         addBodyClass: function() {
  433.             // Insert CSS Into the body so people can style around the effects of this script.
  434.             jQuery.addClass(document.body, scriptBodyClassId);
  435.             ytwp.log('Applied ' + scriptBodyClassSelector);
  436.         },
  437.         html5PlayerFix: function() {
  438.             ytwp.log('html5PlayerFix');
  439.             // Since we have to reload the player anyways, might as well set some useful settings.
  440.             uw.ytplayer.config.args.autohide = 1; // Autohide the playback control bar.
  441.             
  442.             // https://github.com/YePpHa/YouTubeCenter/issues/1083
  443.             if (!ytwp.ytapp || ytwp.ytapp.g.ba === "detailpage") {
  444.                 ytwp.log('rerunning ytplayer.load()');
  445.                 // Next 2 lines are equivalent to: ytplayer.load();
  446.                 ytwp.ytapp = yt.player.Application.create("player-api", ytplayer.config);
  447.                 ytplayer.config.loaded = true;
  448.  
  449.                 ytwp.ytapp.g.ba = "asdf";
  450.             }
  451.         }
  452.     };
  453.  
  454.  
  455.     ytwp.pubsubListeners = {
  456.         'init': function() { // Not always called
  457.             ytwp.event.init();
  458.             ytwp.event.onWatchInit();
  459.             ytwp.event.html5PlayerFix();
  460.         },
  461.         'init-watch': function() { // Not always called
  462.             ytwp.event.init();
  463.             ytwp.event.onWatchInit();
  464.             ytwp.event.html5PlayerFix();
  465.         },
  466.         'player-added': function() { // Not always called
  467.             // Usually called after init-watch, however this is called before init when going from channel -> watch page.
  468.             // The init event is when the body element resets all it's classes.
  469.             ytwp.event.init();
  470.             ytwp.event.onWatchInit();
  471.             ytwp.event.html5PlayerFix();
  472.         },
  473.         // 'player-resize': function() {},
  474.         // 'player-playback-start': function() {},
  475.         'appbar-guide-delay-load': function() {
  476.             // Listen to a later event that is always called in case the others are missed.
  477.             ytwp.event.init();
  478.             ytwp.event.onWatchInit();
  479.  
  480.             // Channel -> /watch
  481.             if (ytwp.util.isWatchUrl())
  482.                 ytwp.event.addBodyClass();
  483.         },
  484.         // 'dispose-watch': function() {},
  485.         'dispose': function() {
  486.             ytwp.event.onDispose();
  487.         }
  488.     };
  489.  
  490.     ytwp.registerYoutubeListeners = function() {
  491.         ytwp.registerYoutubePubSubListeners();
  492.     };
  493.  
  494.     ytwp.registerYoutubePubSubListeners = function() {
  495.         // Subscribe
  496.         for (var eventName in ytwp.pubsubListeners) {
  497.             var eventListener = ytwp.pubsubListeners[eventName];
  498.             uw.yt.pubsub.instance_.subscribe(eventName, eventListener);
  499.         }
  500.     };
  501.  
  502.     ytwp.main = function() {
  503.         try {
  504.             ytwp.registerYoutubeListeners();
  505.         } catch(e) {
  506.             ytwp.error("Could not hook yt.pubsub", e);
  507.         }
  508.         ytwp.event.html5PlayerFix();
  509.         ytwp.event.init();
  510.         ytwp.event.onWatchInit();
  511.     };
  512.  
  513.     ytwp.main();
  514.     
  515. })(typeof unsafeWindow !== 'undefined' ? unsafeWindow : window);

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址