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.

Verzia zo dňa 24.04.2025. Pozri najnovšiu verziu.

  1. // ==UserScript==
  2. // @name YouTube Big Thumbnails Fix
  3. // @namespace https://greatest.deepsurf.us/users/1461079
  4. // @version 1.5
  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-two-column-browse-results-renderer.grid-${settings.videosPerRow}-columns {
  35. width: 100% !important;
  36. }
  37.  
  38. ytd-two-column-browse-results-renderer.grid:not(.grid-disabled) {
  39. max-width: 100% !important;
  40. }
  41.  
  42. /* Hide Shorts completely if setting is enabled */
  43. ${settings.disableShorts ? `
  44. ytd-rich-section-renderer.style-scope.ytd-rich-grid-renderer {
  45. display: none !important;
  46. }
  47. ` : ''}
  48. `);
  49.  
  50. // === "Show More" / hidden content fix ===
  51. if (settings.enableShowMoreFix) {
  52. const observer = new MutationObserver(() => {
  53. document.querySelectorAll('ytd-rich-item-renderer[hidden]').forEach(el => {
  54. el.removeAttribute('hidden');
  55. });
  56.  
  57. document.querySelectorAll('ytd-rich-shelf-renderer').forEach(el => {
  58. el.setAttribute('is-show-more-hidden', '');
  59. });
  60. });
  61.  
  62. observer.observe(document.documentElement, {
  63. childList: true,
  64. subtree: true
  65. });
  66. }
  67. })();