Today I learned
Removing YouTube Shorts with CSS
I'm a bit annoyed by YouTube Shorts on my YouTube feed page. I'm there for for long-term format videos and Shorts just are not my kind of thing.
Rach Smith recently shared this great post on how to remove shorts from your YouTube Subscription feed with :has()
↗ and I was so happy when I stumbled over this post.
She uses it to set display: none
on every on every item in the feed with child elements that are shorts.
Here are the selectors she wrote, both for the grid and the list view:
/* Grid View */
#items.ytd-grid-renderer>ytd-grid-video-renderer:has(ytd-thumbnail-overlay-time-status-renderer[overlay-style="SHORTS"]) {
display: none;
}
/* List View */
ytd-item-section-renderer:not(:has(ytd-grid-renderer)):has(ytd-thumbnail-overlay-time-status-renderer[overlay-style="SHORTS"]) {
display: none;
}
You'd need to add that to a browser extension to apply these custom styles and then you're good to go. Bye bye Shorts!
I hope you enjoyed this post and learned something new. If you have any questions, feel free to reach out to me on Twitter ↗ or via Email ↗.
If you want to support me, you can buy me a coffee. I would be very happy about it!
☕️ Buy me a coffee ☕️I wish you a wonderful day! Marco