☰

Youtube Max Video Height

A simplified userscript to maximize height of youtube media player with no interaction

  1. // ==UserScript==
  2. // @name        Youtube Max Video Height
  3. // @namespace   Youtube Max Video Height
  4. // @match       https://*.youtube.com/*
  5. // @grant       GM_addStyle
  6. // @version     1.0.0
  7. // @author      popiazaza (original), dpi0 (modified)
  8. // @description A simplified userscript to maximize height of youtube media player with no interaction
  9. // @license     MIT
  10. // @homepageURL https://github.com/dpi0/scripts/blob/main/greasyfork/youtube-max-video-height.js
  11. // @originalhomepageURL https://github.com/popiazaza/Youtube-Max-Video-Height
  12. // @supportURL  https://github.com/dpi0/scripts/issues
  13. // ==/UserScript==
  14.  
  15. GM_addStyle(`
  16. ytd-watch-flexy[theater] #player-wide-container.ytd-watch-flexy, 
  17. ytd-watch-flexy[fullscreen] #player-wide-container.ytd-watch-flexy, 
  18. ytd-watch-flexy[full-bleed-player] #full-bleed-container.ytd-watch-flexy, 
  19. ytd-watch-flexy[full-bleed-player] #full-bleed-container.ytd-watch-flexy {
  20.   max-height: calc(100vh);
  21. }
  22. #masthead-container.ytd-app {
  23.   opacity: 0;
  24.   pointer-events: none;
  25. }
  26. #page-manager.ytd-app {
  27.   margin-top: 0;
  28. }
  29. `);
  30.  
  31. (function() {
  32.   // Set different styles for non-watch pages
  33.   const observer = new MutationObserver(() => {
  34.     const masthead = document.getElementById("masthead-container");
  35.     if (!masthead) return;
  36.     
  37.     if (window.location.pathname.startsWith("/watch")) {
  38.       // On watch pages, hide header and disable interactions
  39.       masthead.style.opacity = "0";
  40.       masthead.style.pointerEvents = "none";
  41.       document.getElementById("page-manager").style.marginTop = "0";
  42.     } else {
  43.       // On non-watch pages, show header and enable interactions
  44.       masthead.style.opacity = "1";
  45.       masthead.style.pointerEvents = "auto";
  46.       document.getElementById("page-manager").style.marginTop = 
  47.         "var(--ytd-masthead-height,var(--ytd-toolbar-height))";
  48.     }
  49.   });
  50.   
  51.   // Run initially and observe for changes
  52.   observer.observe(document, { subtree: true, childList: true });
  53.   
  54.   // Initial setup
  55.   if (document.getElementById("masthead-container")) {
  56.     if (window.location.pathname.startsWith("/watch")) {
  57.       document.getElementById("masthead-container").style.opacity = "0";
  58.       document.getElementById("masthead-container").style.pointerEvents = "none";
  59.       document.getElementById("page-manager").style.marginTop = "0";
  60.     } else {
  61.       document.getElementById("masthead-container").style.opacity = "1";
  62.       document.getElementById("masthead-container").style.pointerEvents = "auto";
  63.       document.getElementById("page-manager").style.marginTop = 
  64.         "var(--ytd-masthead-height,var(--ytd-toolbar-height))";
  65.     }
  66.   }
  67. })();