☰

Fix Youtube thumbnail padding for real

Force YouTube to show 6 videos per row and fix padding

  1. // ==UserScript==
  2. // @name         Fix Youtube thumbnail padding for real
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.4
  5. // @description  Force YouTube to show 6 videos per row and fix padding
  6. // @author       Kalakaua
  7. // @match        https://www.youtube.com/*
  8. // @grant        none
  9. // @license      MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Inject custom CSS to force 6 videos per row
  16.     const injectCSS = () => {
  17.         const css = `
  18.             /* Target the correct parent container for the grid */
  19.             ytd-rich-grid-renderer #contents.ytd-rich-grid-renderer {
  20.                 display: grid !important;
  21.                 grid-template-columns: repeat(6, minmax(0, 1fr)) !important; /* 6 columns */
  22.                 gap: 8px !important; /* Adjust the gap between thumbnails */
  23.                 padding-right: 0 !important; /* Remove any default padding */
  24.             }
  25.  
  26.             /* Ensure each video item takes up equal space */
  27.             ytd-rich-item-renderer {
  28.                 width: 100% !important;
  29.                 max-width: 100% !important; /* Prevent overflow */
  30.                 margin-left: 0 !important; /* Reset default margin */
  31.             }
  32.  
  33.             /* Adjust the thumbnail image size */
  34.             ytd-rich-grid-media #thumbnail {
  35.                 width: 100% !important;
  36.                 height: auto !important;
  37.             }
  38.  
  39.             /* Ensure the title and metadata don't overflow */
  40.             ytd-rich-grid-media #meta {
  41.                 max-width: 100% !important;
  42.             }
  43.         `;
  44.  
  45.         const style = document.createElement('style');
  46.         style.innerHTML = css;
  47.         document.head.appendChild(style);
  48.     };
  49.  
  50.     // Function to check if an element is visible
  51.     function isVisible(el) {
  52.         return el.offsetWidth > 0 && el.offsetHeight > 0 && window.getComputedStyle(el).visibility !== 'hidden';
  53.     }
  54.  
  55.     // Function to update margin-left in the specified pattern
  56.     function updateMarginLeft() {
  57.         const elements = document.querySelectorAll('ytd-rich-item-renderer');
  58.         let activeCount = 0;
  59.  
  60.         // Adjust the modulus value based on the number of thumbnails per row
  61.         const thumbnailsPerRow = 6; // 6 thumbnails per row
  62.  
  63.         elements.forEach(el => {
  64.             if (isVisible(el)) {
  65.                 el.style.marginLeft = (activeCount % thumbnailsPerRow === 0) ? '24px' : '8px';
  66.                 activeCount++;
  67.             }
  68.         });
  69.     }
  70.  
  71.     // Run the CSS injection and update margins initially
  72.     injectCSS();
  73.     updateMarginLeft();
  74.  
  75.     // Observe changes in the DOM to reapply the CSS and margins
  76.     const observer = new MutationObserver(() => {
  77.         injectCSS();
  78.         updateMarginLeft();
  79.     });
  80.  
  81.     observer.observe(document.body, {
  82.         childList: true,
  83.         subtree: true
  84.     });
  85.  
  86.     // Also listen for page visibility changes
  87.     document.addEventListener('visibilitychange', () => {
  88.         if (document.visibilityState === 'visible') {
  89.             injectCSS();
  90.             updateMarginLeft();
  91.         }
  92.     });
  93. })();