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!

I wish you a wonderful day! Marco