☰

YouTube Live In-page Fullscreen

Automatically puts the player full-screen on the page when you go to the live page.

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

  1. // ==UserScript==
  2. // @name         YouTube Live In-page Fullscreen
  3. // @version      0.1.0
  4. // @description  Automatically puts the player full-screen on the page when you go to the live page.
  5. // @author       dragonish
  6. // @namespace    https://github.com/dragonish
  7. // @license      GNU General Public License v3.0 or later
  8. // @require      https://cdn.jsdelivr.net/npm/arrive@2.4.1/minified/arrive.min.js
  9. // @match        *://*.youtube.com/*
  10. // @grant        GM_addStyle
  11. // @grant        GM_registerMenuCommand
  12. // ==/UserScript==
  13.  
  14. (function () {
  15.   const FULLSCREEN = `
  16.     body {
  17.       overflow: hidden !important;
  18.     }
  19.     #player #player-container-outer,
  20.     #player #player-container-inner,
  21.     #player #player-container,
  22.     #player #ytd-player,
  23.     #player #container,
  24.     #player #movie_player,
  25.     #player .html5-video-container,
  26.     #player .html5-main-video {
  27.       position: fixed !important;
  28.       margin: 0 !important;
  29.       padding: 0 !important;
  30.       top: 0 !important;
  31.       left: 0 !important;
  32.       border: none !important;
  33.       width: 100% !important;
  34.       height: 100% !important;
  35.       contain: none !important;
  36.       background-color: #000 !important;
  37.       z-index: 10000;
  38.     }
  39.     #player .html5-main-video {
  40.       object-fit: contain !important;
  41.     }
  42.     #player .ytp-chrome-bottom {
  43.       position: fixed !important;
  44.       left: 50% !important;
  45.       transform: translateX(-50%) !important;
  46.       z-index: 10001;
  47.     }
  48.   `;
  49.   class FullScreen {
  50.     constructor() {}
  51.     fullscreenHandler() {
  52.       if (!this.styleElement) {
  53.         this.styleElement = GM_addStyle(FULLSCREEN);
  54.       }
  55.       console.info('handle fullscreen');
  56.       this.menuHandler();
  57.     }
  58.     menuHandler() {
  59.       this.menuKey = GM_registerMenuCommand(this.styleElement ? 'Exit fullscreen' : 'Enter fullscreen', () => {
  60.         if (this.styleElement) {
  61.           this.styleElement.remove();
  62.           this.styleElement = undefined;
  63.           this.menuHandler();
  64.         } else {
  65.           this.fullscreenHandler();
  66.         }
  67.       }, {
  68.         id: this.menuKey
  69.       });
  70.     }
  71.   }
  72.   function main() {
  73.     const isVideoPage = location.href.includes('watch?v=');
  74.     if (!isVideoPage) return;
  75.     const isLivePage = document.querySelector('.ytp-live') != null;
  76.     console.debug('isLivePage: ', isLivePage);
  77.     if (!isLivePage) return;
  78.     document.body.arrive('#player-container-outer', {
  79.       onceOnly: true,
  80.       existing: true
  81.     }, () => {
  82.       console.debug('found the player element');
  83.       const fs = new FullScreen();
  84.       fs.fullscreenHandler();
  85.     });
  86.   }
  87.   main();
  88. })();