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 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