☰

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.

Versión del día 23/4/2025. Echa un vistazo a la versión más reciente.

  1. // ==UserScript==
  2. // @name         YouTube Big Thumbnails Fix
  3. // @namespace    https://greatest.deepsurf.us/users/1461079
  4. // @version      1.3
  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.)
  19.         enableShowMoreFix: true // Set to false to show only 1 row of Shorts (disables "Show More" force-expand)
  20.     };
  21.  
  22.     // === Apply CSS customizations ===
  23.     GM_addStyle(`
  24.         ytd-rich-grid-renderer {
  25.             --ytd-rich-grid-items-per-row: ${settings.videosPerRow} !important;
  26.             --ytd-rich-grid-posts-per-row: ${settings.videosPerRow} !important;
  27.             --ytd-rich-grid-gutter-margin: 0px !important;
  28.             --ytd-rich-grid-slim-items-per-row: 7 !important;  /* Number of shorts per row */
  29.             --ytd-rich-grid-game-cards-per-row: 7 !important;  /* Number of game cards per row (possibly redundant) */
  30.         }
  31.  
  32.         ytd-two-column-browse-results-renderer.grid-${settings.videosPerRow}-columns {
  33.             width: 100% !important;
  34.         }
  35.  
  36.         ytd-two-column-browse-results-renderer.grid:not(.grid-disabled) {
  37.             max-width: 100% !important;
  38.         }
  39.     `);
  40.  
  41.     // === "Show More" / hidden content fix ===
  42.     if (settings.enableShowMoreFix) {
  43.         const observer = new MutationObserver(() => {
  44.             document.querySelectorAll('ytd-rich-item-renderer[hidden]').forEach(el => {
  45.                 el.removeAttribute('hidden');
  46.             });
  47.  
  48.             document.querySelectorAll('ytd-rich-shelf-renderer').forEach(el => {
  49.                 el.setAttribute('is-show-more-hidden', '');
  50.             });
  51.         });
  52.  
  53.         observer.observe(document.documentElement, {
  54.             childList: true,
  55.             subtree: true
  56.         });
  57.     }
  58. })();