YouTube 4 Thumbnails Per Row Fix

Fixes YouTube’s layout to display 4 thumbnails per row, resizing them for a more compact and cleaner browsing experience on the homepage and subscription feed.

当前为 2025-04-22 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name YouTube 4 Thumbnails Per Row Fix
  3. // @namespace https://greasyfork.org/users/1461079
  4. // @version 1.0
  5. // @description Fixes YouTube’s layout to display 4 thumbnails per row, resizing them for a more compact and cleaner browsing experience on the homepage and subscription feed.
  6. // @author Michaelsoft
  7. // @match *://www.youtube.com/*
  8. // @grant none
  9. // @run-at document-start
  10. // @license MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14. 'use strict';
  15.  
  16. function applyFixes() {
  17. const gridRenderer = document.querySelector('ytd-rich-grid-renderer');
  18. if (gridRenderer) {
  19. gridRenderer.style.setProperty('--ytd-rich-grid-items-per-row', '4', 'important');
  20. }
  21.  
  22. document.querySelectorAll('ytd-rich-grid-row, #contents.ytd-rich-grid-row').forEach(el => {
  23. el.style.setProperty('display', 'contents', 'important');
  24. });
  25.  
  26. document.querySelectorAll('ytd-rich-item-renderer').forEach(el => {
  27. el.style.setProperty('margin-right', 'calc(var(--ytd-rich-grid-item-margin)/2)', 'important');
  28. el.style.setProperty('margin-left', 'calc(var(--ytd-rich-grid-item-margin)/2)', 'important');
  29. });
  30.  
  31. // Optional: font size fixes
  32. document.querySelectorAll('#video-title.ytd-rich-grid-media, #video-title.ytd-rich-grid-slim-media').forEach(el => {
  33. el.style.setProperty('font-size', '1.4rem', 'important');
  34. el.style.setProperty('line-height', '2rem', 'important');
  35. });
  36.  
  37. document.querySelectorAll('#metadata-line.ytd-video-meta-block').forEach(el => {
  38. el.style.setProperty('font-size', '1.2rem', 'important');
  39. el.style.setProperty('line-height', '1.8rem', 'important');
  40. });
  41. }
  42.  
  43. // Observe for dynamic content (SPA nav, infinite scroll)
  44. const observer = new MutationObserver(() => {
  45. applyFixes();
  46. });
  47.  
  48. window.addEventListener('load', () => {
  49. applyFixes();
  50. observer.observe(document.body, { childList: true, subtree: true });
  51. });
  52. })();