Force YouTube to show 6 videos per row and fix padding
// ==UserScript==
// @name Fix Youtube thumbnail padding for real
// @namespace http://tampermonkey.net/
// @version 1.4
// @description Force YouTube to show 6 videos per row and fix padding
// @author Kalakaua
// @match https://www.youtube.com/*
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// Inject custom CSS to force 6 videos per row
const injectCSS = () => {
const css = `
/* Target the correct parent container for the grid */
ytd-rich-grid-renderer #contents.ytd-rich-grid-renderer {
display: grid !important;
grid-template-columns: repeat(6, minmax(0, 1fr)) !important; /* 6 columns */
gap: 8px !important; /* Adjust the gap between thumbnails */
padding-right: 0 !important; /* Remove any default padding */
}
/* Ensure each video item takes up equal space */
ytd-rich-item-renderer {
width: 100% !important;
max-width: 100% !important; /* Prevent overflow */
margin-left: 0 !important; /* Reset default margin */
}
/* Adjust the thumbnail image size */
ytd-rich-grid-media #thumbnail {
width: 100% !important;
height: auto !important;
}
/* Ensure the title and metadata don't overflow */
ytd-rich-grid-media #meta {
max-width: 100% !important;
}
`;
const style = document.createElement('style');
style.innerHTML = css;
document.head.appendChild(style);
};
// Function to check if an element is visible
function isVisible(el) {
return el.offsetWidth > 0 && el.offsetHeight > 0 && window.getComputedStyle(el).visibility !== 'hidden';
}
// Function to update margin-left in the specified pattern
function updateMarginLeft() {
const elements = document.querySelectorAll('ytd-rich-item-renderer');
let activeCount = 0;
// Adjust the modulus value based on the number of thumbnails per row
const thumbnailsPerRow = 6; // 6 thumbnails per row
elements.forEach(el => {
if (isVisible(el)) {
el.style.marginLeft = (activeCount % thumbnailsPerRow === 0) ? '24px' : '8px';
activeCount++;
}
});
}
// Run the CSS injection and update margins initially
injectCSS();
updateMarginLeft();
// Observe changes in the DOM to reapply the CSS and margins
const observer = new MutationObserver(() => {
injectCSS();
updateMarginLeft();
});
observer.observe(document.body, {
childList: true,
subtree: true
});
// Also listen for page visibility changes
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'visible') {
injectCSS();
updateMarginLeft();
}
});
})();