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.

נכון ליום 23-04-2025. ראה הגרסה האחרונה.

התקן את הסקריפט ?

שאל שאלה, פרסם ביקורת, או דווח על הסקריפט.

Wrap lines

// ==UserScript==
// @name         YouTube Big Thumbnails Fix
// @namespace    https://greatest.deepsurf.us/users/1461079
// @version      1.1
// @description  Fixes YouTube’s oversized thumbnails with a customizable grid: More videos per row, full width, and no gaps — for a compact, efficient layout.
// @author       Michaelsoft
// @match        *://www.youtube.com/*
// @grant        GM_addStyle
// @run-at       document-start
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // === SETTINGS ===
    const settings = {
        videosPerRow: 6, // Change this to set videos per row (e.g. 4, 5, 6, etc.)
        slimVideosPerRow: 7, // Slim layout (e.g., on home page)
        gameCardsPerRow: 7, // Game card layout
        enableShowMoreFix: true // Set to false to show only 1 row of Shorts (disables "Show More" force-expand)
    };

    // === Apply CSS customizations ===
    GM_addStyle(`
        ytd-rich-grid-renderer {
            --ytd-rich-grid-items-per-row: ${settings.videosPerRow} !important;
            --ytd-rich-grid-posts-per-row: ${settings.videosPerRow} !important;
            --ytd-rich-grid-gutter-margin: 0px !important;
            --ytd-rich-grid-slim-items-per-row: ${settings.slimVideosPerRow} !important;
            --ytd-rich-grid-game-cards-per-row: ${settings.gameCardsPerRow} !important;
        }

        ytd-two-column-browse-results-renderer.grid-${settings.videosPerRow}-columns {
            width: 100% !important;
        }

        ytd-two-column-browse-results-renderer.grid:not(.grid-disabled) {
            max-width: 100% !important;
        }
    `);

    // === "Show More" / hidden content fix ===
    if (settings.enableShowMoreFix) {
        const observer = new MutationObserver(() => {
            document.querySelectorAll('ytd-rich-item-renderer[hidden]').forEach(el => {
                el.removeAttribute('hidden');
            });

            document.querySelectorAll('ytd-rich-shelf-renderer').forEach(el => {
                el.setAttribute('is-show-more-hidden', '');
            });
        });

        observer.observe(document.documentElement, {
            childList: true,
            subtree: true
        });
    }
})();