☰

YouTube 3 Video Grid Fix

Fixes Youtubes stupid update idea to allow only 3 videos to load in each grid.

  1. // ==UserScript==
  2. // @name         YouTube 3 Video Grid Fix
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.3
  5. // @description  Fixes Youtubes stupid update idea to allow only 3 videos to load in each grid.
  6. // @match        *://www.youtube.com/*
  7. // @grant        none
  8. // @run-at       document-start
  9. // @license MIT
  10. // ==/UserScript==
  11.  
  12. (function(){
  13.     'use strict';
  14.     const ID = 'yt5col-home',
  15.           CSS = `
  16.             ytd-rich-grid-renderer{--ytd-rich-grid-items-per-row:5!important}
  17.             ytd-rich-grid-renderer>#contents>ytd-rich-grid-row,
  18.             ytd-item-section-renderer ytd-rich-grid-row{
  19.               display:grid!important;
  20.               grid-template-columns:repeat(5,minmax(0,1fr))!important;
  21.               gap:var(--ytd-rich-grid-gutter-margin,16px)!important;
  22.               width:100%!important
  23.             }
  24.             ytd-thumbnail{max-height:none!important;height:auto!important;width:100%!important}
  25.             ytd-thumbnail img{width:100%!important;height:100%!important;object-fit:cover!important}
  26.           `;
  27.     function update(){
  28.         if(location.pathname==='/' && !document.getElementById(ID)){
  29.             let s=document.createElement('style');
  30.             s.id=ID; s.textContent=CSS;
  31.             document.head.appendChild(s);
  32.         }
  33.         else if(location.pathname!=='/' && document.getElementById(ID)){
  34.             document.getElementById(ID).remove();
  35.         }
  36.     }
  37.     history.pushState     = (f=>function(){ f.apply(this,arguments); update(); })(history.pushState);
  38.     history.replaceState  = (f=>function(){ f.apply(this,arguments); update(); })(history.replaceState);
  39.     window.addEventListener('popstate', update);
  40.     window.addEventListener('yt-navigate-finish', update);
  41.     update();
  42. })();