☰

YouTube Fullscreen Fix — Disable “More Videos” Grid + Preserve Controls

Hide fullscreen “More Videos” grid & vignette; keep scroll-wheel volume. Prevent tick-4/7 jiggle without forcing visibility. V-key manual hide. Hide interactive overlay in fullscreen. Allow normal autohide in FS and windowed modes.

// ==UserScript==
// @name         YouTube Fullscreen Fix — Disable “More Videos” Grid + Preserve Controls
// @namespace    orangekite
// @version      1.3.6
// @description  Hide fullscreen “More Videos” grid & vignette; keep scroll-wheel volume. Prevent tick-4/7 jiggle without forcing visibility. V-key manual hide. Hide interactive overlay in fullscreen. Allow normal autohide in FS and windowed modes.
// @match        https://www.youtube.com/*
// @run-at       document-start
// @grant        GM_addStyle
// @license      MIT
// ==/UserScript==

(function () {
  'use strict';

  GM_addStyle(`
/* Fullscreen-scoped: match when either the player OR an ancestor is fullscreen */
.html5-video-player:fullscreen,
:fullscreen .html5-video-player {
  --ytp-grid-scroll-percentage: 0 !important;
  --ytp-grid-peek-height: 0px !important;
  --ytp-grid-peek-gradient: 0 !important;
  --ytp-controls-peek-height: 0px !important;
  --ytp-controls-peek-percent: 0 !important;
}

/* Hide the fullscreen recommendations grid and its moving parts */
.html5-video-player:fullscreen [class*="fullscreen-grid"],
.html5-video-player:fullscreen [class*="fullerscreen-grid"],
.html5-video-player:fullscreen [class*="grid-stills"],
.html5-video-player:fullscreen [class*="videowall-still"],
:fullscreen .html5-video-player [class*="fullscreen-grid"],
:fullscreen .html5-video-player [class*="fullerscreen-grid"],
:fullscreen .html5-video-player [class*="grid-stills"],
:fullscreen .html5-video-player [class*="videowall-still"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

/* Hide the vignette/scrim/gradient behind the grid */
.html5-video-player:fullscreen [class*="grid-vignette"],
.html5-video-player:fullscreen [class*="grid-scrim"],
.html5-video-player:fullscreen [class*="gradient-bottom"],
:fullscreen .html5-video-player [class*="grid-vignette"],
:fullscreen .html5-video-player [class*="grid-scrim"],
:fullscreen .html5-video-player [class*="gradient-bottom"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Hide “fullerscreen” education/teaser overlays */
.html5-video-player:fullscreen [class*="fullerscreen"],
.html5-video-player:fullscreen .ytp-fullerscreen-edu-panel,
.html5-video-player:fullscreen .ytp-cards-teaser,
.html5-video-player:fullscreen .ytp-cards-teaser-box,
:fullscreen .html5-video-player [class*="fullerscreen"],
:fullscreen .html5-video-player .ytp-fullerscreen-edu-panel,
:fullscreen .html5-video-player .ytp-cards-teaser,
:fullscreen .html5-video-player .ytp-cards-teaser-box {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Safety net for lingering vignette/scrim overlays */
.html5-video-player:fullscreen [class*="vignette"],
.html5-video-player:fullscreen [class*="scrim"],
:fullscreen .html5-video-player [class*="vignette"],
:fullscreen .html5-video-player [class*="scrim"] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* --- IMPORTANT: Don't force visibility; just remove jiggle when bar is VISIBLE --- */

/* Neutralize any “peek” transforms but ONLY when not autohidden */
:is(.html5-video-player:fullscreen, :fullscreen .html5-video-player):not(.ytp-autohide):not(.ytp-hide-controls)
  [class*="peek"] {
  transform: none !important;
  translate: 0 !important;
}

/* Stop tick-4 jiggle: anchor the chrome only when not autohidden */
:is(.html5-video-player:fullscreen, :fullscreen .html5-video-player):not(.ytp-autohide):not(.ytp-hide-controls)
  .ytp-chrome-bottom {
  bottom: 0 !important;
  transform: translateY(0) !important;
  translate: 0 !important;
  margin-bottom: 0 !important;
  transition: none !important;
}

/* If YouTube injects inline translateY on the chrome, zero it (when not autohidden) */
:is(.html5-video-player:fullscreen, :fullscreen .html5-video-player):not(.ytp-autohide):not(.ytp-hide-controls)
  .ytp-chrome-bottom[style*="translate"] {
  transform: translateY(0) !important;
}

/* Permanently remove interactive overlay in fullscreen */
.html5-video-player:fullscreen :is(.ytp-overlay-bottom-right, .branding-img-container.ytp-button),
:fullscreen .html5-video-player :is(.ytp-overlay-bottom-right, .branding-img-container.ytp-button) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
  `);

  // ---------------- Core JS helper: keep things smooth; V-key manual hide
  let manualHideActive = false;

  // NOTE: Do NOT force opacity/visibility in FS. Let YT autohide work.
  const restoreChrome = () => {
    const player = document.querySelector('.html5-video-player.ytp-fullscreen');
    if (!player) return;
    const chrome = player.querySelector('.ytp-chrome-bottom');
    if (!chrome) return;

    if (manualHideActive) return;

    // If YT temporarily sets display:none during transitions, restore native display.
    if (!chrome.dataset.nativeDisplay) {
      chrome.dataset.nativeDisplay = getComputedStyle(chrome).display || 'flex';
    }
    const disp = getComputedStyle(chrome).display;
    if (disp === 'none' || chrome.style.display === 'none') {
      chrome.style.display = chrome.dataset.nativeDisplay;
    }

    // IMPORTANT: Do not set opacity/visibility/transform here.
    // We only rely on CSS anchoring when not autohidden.
    chrome.style.removeProperty('opacity');
    chrome.style.removeProperty('visibility');
    chrome.style.removeProperty('transform');
  };

  // Keep controls stable during wheel "peek" while in FS
  window.addEventListener('wheel', restoreChrome, { passive: true });

  // Scrub inline styles on FS boundaries so normal autohide works in both modes
  document.addEventListener('fullscreenchange', () => {
    const fsPlayer  = document.querySelector('.html5-video-player.ytp-fullscreen');
    const fsChrome  = fsPlayer?.querySelector('.ytp-chrome-bottom');
    manualHideActive = false;

    if (document.fullscreenElement) {
      // Entering FS: remove stale inline overrides and ensure native display
      if (fsChrome) {
        if (!fsChrome.dataset.nativeDisplay) {
          fsChrome.dataset.nativeDisplay = getComputedStyle(fsChrome).display || 'flex';
        }
        fsChrome.style.removeProperty('opacity');
        fsChrome.style.removeProperty('visibility');
        fsChrome.style.removeProperty('transform');
        fsChrome.style.removeProperty('bottom');
        fsChrome.style.removeProperty('margin-bottom');
        if (getComputedStyle(fsChrome).display === 'none') {
          fsChrome.style.display = fsChrome.dataset.nativeDisplay;
        }
      }
    } else {
      // Exiting FS: clean all players so windowed autohide resumes
      document.querySelectorAll('.html5-video-player .ytp-chrome-bottom').forEach(chrome => {
        chrome.style.removeProperty('opacity');
        chrome.style.removeProperty('visibility');
        chrome.style.removeProperty('transform');
        chrome.style.removeProperty('display');
        chrome.style.removeProperty('bottom');
        chrome.style.removeProperty('margin-bottom');
      });
    }
  }, { passive: true });

  // V-key: manual hide/show for the control bar (fullscreen only)
  (() => {
    const playerSelector = '.html5-video-player.ytp-fullscreen';
    const chromeSelector = '.ytp-chrome-bottom';

    function applyManualHideStyles(chrome, hide) {
      if (hide) {
        chrome.style.setProperty('opacity', '0', 'important');
        chrome.style.setProperty('visibility', 'hidden', 'important');
        chrome.style.removeProperty('transform');
      } else {
        chrome.style.removeProperty('opacity');
        chrome.style.removeProperty('visibility');
        restoreChrome();
      }
    }

    window.addEventListener('keydown', e => {
      if (e.key.toLowerCase() !== 'v') return;
      const player = document.querySelector(playerSelector);
      if (!player) return;
      const chrome = player.querySelector(chromeSelector);
      if (!chrome) return;

      manualHideActive = !manualHideActive;
      applyManualHideStyles(chrome, manualHideActive);
    }, true);

    // Keep behavior consistent if other events fire while hidden
    const syncIfNeeded = () => {
      if (!manualHideActive) return;
      const player = document.querySelector(playerSelector);
      const chrome = player?.querySelector(chromeSelector);
      if (chrome) applyManualHideStyles(chrome, true);
    };
    window.addEventListener('wheel', syncIfNeeded, { passive: true });
    window.addEventListener('keyup', syncIfNeeded, { passive: true });
  })();

})();