☰

YouTube True Theater Mode

Apply a custom css when you enter theater mode in YouTube, hiding everything except the video.

当前为 2025-01-01 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         YouTube True Theater Mode
  3. // @namespace    azb-truetheater
  4. // @version      0.4
  5. // @description  Apply a custom css when you enter theater mode in YouTube, hiding everything except the video.
  6. // @author       Azb
  7. // @match        https://www.youtube.com/watch*
  8. // @license MIT
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     function applyCustomStyles() {
  15.         const customCSS = `
  16.             ytd-watch-flexy[theater] #full-bleed-container.ytd-watch-flexy {
  17.                 height: 100vh;
  18.                 max-height: none;
  19.             }
  20.         #masthead-container.ytd-app {
  21.             margin-top: 0px;
  22.             padding-bottom: 5px;
  23.             opacity: 0;
  24.             transition: margin 0ms, padding 0ms, opacity 400ms;
  25.         }
  26.         #masthead-container.ytd-app:hover {
  27.             margin-top: 0;
  28.             padding-bottom: 0;
  29.             opacity: 1;
  30.             background: #0f0f0f;
  31.         }
  32.         #page-manager.ytd-app {
  33.             margin-top: -6px;
  34.         }
  35.         ytd-feed-filter-chip-bar-renderer[fluid-width] #chips-content.ytd-feed-filter-chip-bar-renderer {
  36.             display: none !important;
  37.         }
  38.     `;
  39.         const styleElement = document.createElement('style');
  40.         styleElement.textContent = customCSS;
  41.         styleElement.id = 'custom-youtube-styles';
  42.         document.head.appendChild(styleElement);
  43.     }
  44.  
  45.  
  46.     function removeCustomStyles() {
  47.         const styleElement = document.querySelector('#custom-youtube-styles');
  48.         if (styleElement) {
  49.             styleElement.remove();
  50.         }
  51.     }
  52.  
  53.     function handleTheaterModeChange(mutations) {
  54.         const theaterAttribute = mutations[0].target.getAttribute('theater');
  55.         if (theaterAttribute !== null) {
  56.             applyCustomStyles();
  57.         } else {
  58.             removeCustomStyles();
  59.         }
  60.     }
  61.  
  62.     const observer = new MutationObserver(mutations => {
  63.         mutations.forEach(mutation => {
  64.             if (mutation.type === 'attributes' && mutation.attributeName === 'theater') {
  65.                 handleTheaterModeChange([mutation]);
  66.             }
  67.         });
  68.     });
  69.  
  70.     function observePage() {
  71.         const targetNode = document.documentElement;
  72.         if (targetNode) {
  73.             observer.observe(targetNode, {
  74.                 attributes: true,
  75.                 subtree: true
  76.             });
  77.         }
  78.     }
  79.  
  80.     observePage();
  81.  
  82.     if (document.querySelector('ytd-watch-flexy').hasAttribute('theater')) {
  83.         applyCustomStyles();
  84.     }
  85. })();