☰

YouTube Big Thumbnails Fix

Fixes YouTube’s oversized thumbnails with a customizable grid: More videos per row, full width, and no gaps — for a compact, efficient layout.

Versione datata 25/04/2025. Vedi la nuova versione l'ultima versione.

  1. // ==UserScript==
  2. // @name         YouTube Big Thumbnails Fix
  3. // @namespace    https://greatest.deepsurf.us/users/1461079
  4. // @version      1.6
  5. // @description  Fixes YouTube’s oversized thumbnails with a customizable grid: More videos per row, full width, and no gaps — for a compact, efficient layout.
  6. // @author       Michaelsoft
  7. // @match        *://www.youtube.com/*
  8. // @grant        GM_addStyle
  9. // @run-at       document-start
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // === SETTINGS ===
  17.     const settings = {
  18.         videosPerRow: 6, // Change this to set videos per row (e.g. 4, 5, 6, etc.). Default value is 6.
  19.         shortsPerRow: 12,// Change this to set shorts per row (e.g. 7, 8, 9, etc.). Default value to 12.
  20.         disableShorts: false, // Set to true to completely hide the Shorts section. Default value is false.
  21.         enableShowMoreFix: true, // Set to false to show only 1 row of Shorts (disables "Show More" force-expand). Default value is true.
  22.     };
  23.  
  24.     // === Apply CSS customizations ===
  25.     GM_addStyle(`
  26.         ytd-rich-grid-renderer {
  27.             --ytd-rich-grid-items-per-row: ${settings.videosPerRow} !important;
  28.             --ytd-rich-grid-posts-per-row: ${settings.videosPerRow} !important;
  29.             --ytd-rich-grid-slim-items-per-row: ${settings.shortsPerRow} !important;
  30.             --ytd-rich-grid-game-cards-per-row: 7 !important;  /* Number of game cards per row (possibly redundant) */
  31.             --ytd-rich-grid-gutter-margin: 0px !important;
  32.         }
  33.  
  34.         ytd-rich-shelf-renderer {
  35.             --ytd-rich-grid-items-per-row: ${settings.shortsPerRow} !important;
  36.         }
  37.  
  38.         ytd-two-column-browse-results-renderer.grid-${settings.videosPerRow}-columns {
  39.             width: 100% !important;
  40.         }
  41.  
  42.         ytd-two-column-browse-results-renderer.grid:not(.grid-disabled) {
  43.             max-width: 100% !important;
  44.         }
  45.  
  46.         /* Hide Shorts completely if setting is enabled */
  47.         ${settings.disableShorts ? `
  48.             ytd-rich-section-renderer.style-scope.ytd-rich-grid-renderer {
  49.                 display: none !important;
  50.             }
  51.         ` : ''}
  52.     `);
  53.  
  54.     // === "Show More" / hidden content fix ===
  55.     if (settings.enableShowMoreFix) {
  56.         const observer = new MutationObserver(() => {
  57.             document.querySelectorAll('ytd-rich-item-renderer[hidden]').forEach(el => {
  58.                 el.removeAttribute('hidden');
  59.             });
  60.  
  61.             document.querySelectorAll('ytd-rich-shelf-renderer').forEach(el => {
  62.                 el.setAttribute('is-show-more-hidden', '');
  63.             });
  64.         });
  65.  
  66.         observer.observe(document.documentElement, {
  67.             childList: true,
  68.             subtree: true
  69.         });
  70.     }
  71. })();