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.

2025-04-23 या दिनांकाला. सर्वात नवीन आवृत्ती पाहा.

  1. // ==UserScript==
  2. // @name YouTube Big Thumbnails Fix
  3. // @namespace https://greatest.deepsurf.us/users/1461079
  4. // @version 1.1
  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. slimVideosPerRow: 7, // Slim layout (e.g., on home page)
  20. gameCardsPerRow: 7, // Game card layout
  21. enableShowMoreFix: true // Set to false to show only 1 row of Shorts (disables "Show More" force-expand)
  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-gutter-margin: 0px !important;
  30. --ytd-rich-grid-slim-items-per-row: ${settings.slimVideosPerRow} !important;
  31. --ytd-rich-grid-game-cards-per-row: ${settings.gameCardsPerRow} !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.  
  43. // === "Show More" / hidden content fix ===
  44. if (settings.enableShowMoreFix) {
  45. const observer = new MutationObserver(() => {
  46. document.querySelectorAll('ytd-rich-item-renderer[hidden]').forEach(el => {
  47. el.removeAttribute('hidden');
  48. });
  49.  
  50. document.querySelectorAll('ytd-rich-shelf-renderer').forEach(el => {
  51. el.setAttribute('is-show-more-hidden', '');
  52. });
  53. });
  54.  
  55. observer.observe(document.documentElement, {
  56. childList: true,
  57. subtree: true
  58. });
  59. }
  60. })();