Skip to content

Youtube Grid Customizer by thunder33345

Screenshot of Youtube Grid Customizer
Homepage Write a review Install Get Stylus

Details

Authorthunder33345

LicenseBSD-2-Clause

Categoryyoutube.com

Created

Updated

Size6.6 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Allow customizing amount of videos shown per row on youtube's video grid

Notes

Do you feel like your grids are too empty? Now you can make it denser, just like how it was!

The setting allows you to configure how many videos to show per row, with individual settings for different types of pages.
Depending on the feature, you can set a value to 0 or -1 to disable that feature.

Source code

/* ==UserStyle==
@name           Youtube Grid Customizer
@namespace      github.com/thunder33345/youtube-grid
@version        0.0.8
@description    Allow customizing videos per row in youtube video grids
@author         Thunder
@license        BSD-2-Clause
copyright 2024 Thunder

@homepageURL https://github.com/Thunder33345/userstyles

@preprocessor stylus
@var number grid-per-row-home "Home: Videos per row" [5, 0, 30, 1]
@var checkbox hide-home-shorts "Home: Fix hidden shorts gap(hides shorts)" 1
@var number grid-per-row-sub "Sub: Videos per row" [5, 0, 30, 1]
@var checkbox hide-sub-shorts "Sub: Fix hidden shorts gap(hides shorts)" 1

@var number grid-margin "Home&Sub: Grid side margin(vw)" [0.6, -1, 10, 0.01, "vw"]

@var number grid-per-row-channel "Channel: Videos per row" [5, 0, 30, 1]

@var number grid-per-row-hashtag "Hashtag: Videos per row" [5, 0, 30, 1]

@var checkbox search-revert-big-mode "Search: Fix large thumbnail in search" 1
@var number search-thumbnail-max "Search: Thumbnail max width" [260,0,"px"]
@var number search-thumbnail-min "Search: Thumbnail min width" [240,0,"px"]

@var number view-min-width "All: Required viewport width before grid options applies(px)" [900, 0, null, 1, "px"]
@var number item-bottom-margin "All: Grid Video bottom margin(vh)" [0.65, -1, 10, 0.01, "vh"]
@var number font-size-video-title "All: Grid video title size(rem)" [1.35, -1, 10, 0.01, "rem"]
@var number font-size-video-channel "All: Grid video channel size(rem)" [1.2, -1, 10, 0.01, "rem"]
@var number font-size-video-info "All: Grid video info size(rem)" [1.15, -1, 10, 0.01, "rem"]
@var number item-thumbnail-round "All: Grid thumbnail roundness(px)" [12, -1, 100, 0.01, "px"]

Code for grids originally from https://www.reddit.com/r/youtube/comments/125nbtz/how_to_change_number_of_videos_per_row_how_to/
Code for font size originally from https://www.reddit.com/r/youtube/comments/141ts0q/comment/jnej6z8/
==/UserStyle== */
@-moz-document url("https://www.youtube.com/") {
	/* Home grid specific rules */
	if grid-per-row-home > 0 {
		@media (min-width: view-min-width) {
			/* Fix grid display amount*/
			.style-scope.ytd-rich-grid-renderer {
				--ytd-rich-grid-items-per-row: grid-per-row-home
			}

			#contents > ytd-rich-grid-row,
			#contents > ytd-rich-grid-row > #contents {
				display: contents
			}

			.ghost-grid.ytd-ghost-grid-renderer {
				width: calc(var(--ytd-rich-grid-content-max-width) + var(--ytd-rich-grid-item-margin));
				margin: 0 0px;
			}
		}
	}

	if hide-home-shorts {
		#contents ytd-rich-section-renderer:has(div#content ytd-counterfactual-renderer) {
			display: none;
		}

		#contents ytd-rich-section-renderer:has(div#content ytd-rich-shelf-renderer[is-shorts]) {
			display: none;
		}
	}
}

@-moz-document url-prefix("https://www.youtube.com/feed/subscriptions") {
	/* Subscription grid specific rules */
	if grid-per-row-sub > 0 {
		@media (min-width: view-min-width) {
			/* Fix grid display amount*/
			.style-scope.ytd-rich-grid-renderer {
				--ytd-rich-grid-items-per-row: grid-per-row-sub;
			}

			#contents > ytd-rich-grid-row,
			#contents > ytd-rich-grid-row > #contents {
				display: contents;
			}

			.ghost-grid.ytd-ghost-grid-renderer {
				width: calc(var(--ytd-rich-grid-content-max-width) + var(--ytd-rich-grid-item-margin));
				margin: 0 0px;
			}
		}
	}

	if hide-sub-shorts {
		/* 	Hide shorts to fix shorts gap
			adblocking the short section seems to leave a gap in CSS grid, so displaying none is needed */
		#contents ytd-rich-section-renderer:has(div#content ytd-rich-shelf-renderer[is-shorts]) {
			display: none;
		}
	}
}

@-moz-document url-prefix("https://www.youtube.com/feed/subscriptions"),
url("https://www.youtube.com/") {
	/* Home and Subcription shared rules */
	/* Add some margin for subscription and home page */
	if grid-margin > -1 {
		#page-manager ytd-browse.style-scope.ytd-page-manager {
			margin-left: grid-margin;
			margin-right: grid-margin;
		}
	}

	/* TODO fix "for you" on channel page "grid": no item per row, hardcoded in heigh and width px */
}

@-moz-document url-prefix("https://www.youtube.com/hashtag") {
	/* Hashtag page specific rules */
	if grid-per-row-hashtag > 0 {
		@media (min-width: view-min-width) {
			/* Fix grid display amount*/
			.style-scope.ytd-rich-grid-renderer {
				--ytd-rich-grid-items-per-row: grid-per-row-home;
			}

			#contents > ytd-rich-grid-row,
			#contents > ytd-rich-grid-row > #contents {
				display: contents;
			}
		}
	}
}

@-moz-document regexp("https://www.youtube.com/.*/videos") {
	/* Channel grid specific rules */
	if grid-per-row-channel > 0 {
		@media (min-width: view-min-width) {
			/* Fix grid display amount*/
			.style-scope.ytd-rich-grid-renderer {
				--ytd-rich-grid-items-per-row: grid-per-row-channel;
			}

			#contents > ytd-rich-grid-row,
			#contents > ytd-rich-grid-row > #contents {
				display: contents;
			}

			/* hack to fix joined items, enables only if using custom rows on channel page */
			ytd-rich-item-renderer[is-slim-grid]:first-of-type {
				margin-left: calc(var(--ytd-rich-grid-item-margin)/2)
			}

			ytd-rich-item-renderer[is-slim-grid]:last-of-type {
				margin-right: calc(var(--ytd-rich-grid-item-margin)/2)
			}
		}
	}
}

@-moz-document url-prefix("https://www.youtube.com/results?search_query") {
	/* Search rules */
	if search-revert-big-mode {
		ytd-video-renderer[use-search-ui] ytd-thumbnail.ytd-video-renderer {
			max-width: search-thumbnail-max !important;
			min-width: search-thumbnail-min !important;
		}
	}
}

@-moz-document url-prefix("https://www.youtube.com/feed/subscriptions"),
url("https://www.youtube.com/"),
regexp("https://www.youtube.com/.*/videos"),
url-prefix("https://www.youtube.com/hashtag") {
	/* Shared rules */
	/* Change font sizes */
	if font-size-video-title > -1 {
		/* Video Title */
		#video-title.ytd-rich-grid-media {
			font-size: font-size-video-title !important;
		}
	}

	if font-size-video-channel > -1 {
		/* Video Channel */
		a.yt-simple-endpoint.yt-formatted-string {
			font-size: font-size-video-channel !important;
		}
	}

	if font-size-video-info > -1 {
		/* Video Info */
		ytd-video-meta-block[rich-meta] #metadata-line.ytd-video-meta-block {
			font-size: font-size-video-info !important;
		}
	}

	if item-bottom-margin > -1 {
		ytd-rich-item-renderer {
			margin-bottom: item-bottom-margin;
		}
	}
}

@-moz-document url-prefix("https://www.youtube.com") {
	/* Global rules */
	if item-thumbnail-round > -1 {
		/* Thumbnail roundness */
		ytd-thumbnail[size] a.ytd-thumbnail,
		ytd-thumbnail[size]:before {
			border-radius: item-thumbnail-round !important;
		}
	}
}

Reviews

No reviews yet.