☰

Return YouTube Grid Layout

유튜브 홈/구독에서 보여지는 영상 갯수 제한을 원래대로 돌립니다 Force YouTube grid layout to show 1~6 videos per row responsively, and scale up thumbnails on wide screens

目前为 2025-04-28 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         Return YouTube Grid Layout
  3. // @namespace    Return YouTube Grid Layout
  4. // @version      1.3.2
  5. // @description  유튜브 홈/구독에서 보여지는 영상 갯수 제한을 원래대로 돌립니다 Force YouTube grid layout to show 1~6 videos per row responsively, and scale up thumbnails on wide screens
  6. // @author       DOGJIP
  7. // @match        https://www.youtube.com/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
  9. // @grant        none
  10. // @run-at document-start
  11. // ==/UserScript==
  12.  
  13. (function () {
  14.     'use strict';
  15.  
  16.     const STYLE_ID = 'custom-grid-style';
  17.  
  18.     function getItemsPerRow(width) {
  19.         if (width >= 2200) return 6;
  20.         if (width >= 1800) return 5;
  21.         if (width >= 1500) return 4;
  22.         if (width >= 1050) return 3;
  23.         if (width >= 650) return 2;
  24.         return 1;
  25.     }
  26.  
  27.     function getItemWidth(width, itemsPerRow) {
  28.         const containerWidth = width - 96;
  29.         const totalMargin = 16 * (itemsPerRow - 1);
  30.         const itemWidth = Math.floor((containerWidth - totalMargin) / itemsPerRow);
  31.  
  32.         const maxDefault = 300;
  33.         const minDefault = 220;
  34.  
  35.         const maxW = Math.min(Math.max(itemWidth, maxDefault), 400);
  36.         const minW = Math.min(Math.max(itemWidth - 20, minDefault), maxW - 10);
  37.  
  38.         return { maxW, minW };
  39.     }
  40.  
  41.     function generateStyle(width) {
  42.         const n = getItemsPerRow(width);
  43.         const { maxW, minW } = getItemWidth(width, n);
  44.  
  45.         return `
  46.             ytd-rich-grid-renderer {
  47.                 --ytd-rich-grid-item-max-width: ${maxW}px !important;
  48.                 --ytd-rich-grid-item-min-width: ${minW}px !important;
  49.                 --ytd-rich-grid-row-margin: 32px !important;
  50.                 --ytd-rich-grid-items-per-row: ${n} !important;
  51.                 --ytd-rich-grid-item-margin: 16px !important;
  52.                 --ytd-rich-grid-posts-per-row: ${n} !important;
  53.                 --ytd-rich-grid-slim-items-per-row: ${n} !important;
  54.                 --ytd-rich-grid-game-cards-per-row: ${n} !important;
  55.                 --ytd-rich-grid-mini-game-cards-per-row: ${n} !important;
  56.                 --ytd-rich-grid-content-offset-top: 56px !important;
  57.             }
  58.         `;
  59.     }
  60.  
  61.     function isExcludedPage(path) {
  62.         return /^\/@[^\/]+\/(?:videos|streams)\/?$/.test(path);
  63.     }
  64.  
  65.     function applyStyle() {
  66.         if (isExcludedPage(location.pathname)) {
  67.             const old = document.getElementById(STYLE_ID);
  68.             if (old) old.remove();
  69.             return;
  70.         }
  71.  
  72.         const old = document.getElementById(STYLE_ID);
  73.         if (old) old.remove();
  74.  
  75.         const styleEl = document.createElement('style');
  76.         styleEl.id = STYLE_ID;
  77.         styleEl.textContent = generateStyle(window.innerWidth);
  78.         document.head.appendChild(styleEl);
  79.     }
  80.  
  81.     document.addEventListener('DOMContentLoaded', applyStyle);
  82.     window.addEventListener('resize', () => applyStyle());
  83.  
  84.     const observer = new MutationObserver(() => {
  85.         applyStyle();
  86.     });
  87.     observer.observe(document.body, { childList: true, subtree: true });
  88. })();