Resize YT To Window Size

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

目前為 2015-01-29 提交的版本,檢視 最新版本

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

QingJ © 2025

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