DEV Community

Cover image for Ad-Free YouTube With a Custom Player
JS Bits Bill
JS Bits Bill

Posted on

Ad-Free YouTube With a Custom Player

As enshittification marches on, more ads, more dark patterns, more UI designed to serve the platform instead of the user, I've found myself writing more and more userscripts to just take back control of my own browser.

The web is full of it these days. Search results that bury the actual answer under AI summaries and SEO slop, cookie banners engineered to trick you into opting in, UI patterns designed to get you to click something you never intended to. I've just started writing small scripts to deal with it, nothing fancy, just enough JS to sand off the rough edges of whatever site is annoying me that week.

YouTube has been one of the worst offenders. Pre-roll ads, mid-roll interruptions, recommended video overlays hijacking your screen the second a video ends. But it turns out YouTube's own embed URL has a lesser-known cousin that makes most of this go away: youtube-nocookie.com. It's their own domain, built for privacy-respecting embeds and as a side effect, it serves no ads. 🎉

The script intercepts any youtube.com/watch?v=VIDEO_ID link and reconstructs it as a yout-ube.com/watch?v=VIDEO_ID URL, opening it in a new tab. yout-ube.com is a third-party pass-through that rewrites the request and loads it via youtube-nocookie.com/embed with the right HTTP Referer context intact. That Referer is what matters — if you navigate directly to a nocookie embed URL or just hit refresh, YouTube throws an Error 153 and kills playback entirely. The yout-ube.com hop is what keeps everything happy.

From there a second script runs on the nocookie domain to enhance the player. You get the full video, zero ads. Just the video. It sounds simple because it should have always been this way.

YouTube No Cookie Player
The custom player on youtube-nocookie.com — comments panel open, like/dislike ratio bar, clean controls, zero ads.


What I Built

Speed hold: hold the mouse button over the video to speed it up. Upper half = 2x, lower half = 3x. Release to snap back to 1x. No UI, no buttons, just muscle memory.

Double-click fullscreen: YouTube's overlay swallows the native dblclick event so I track clicks manually. Two clicks within 300ms over the video area toggles fullscreen.

Comments panel: a collapsible panel at the bottom of the player that pulls comments via the YouTube Data API v3. Top or New sort, like counts, timestamps, and a like/dislike ratio bar.


UI Cleanup

The nocookie player still renders some unwanted elements, a "watch on YouTube" button, a fullscreen recommendations overlay, the loop icon. All of it gets nuked with CSS:

player-fullscreen-action-menu,
.ytp-pause-overlay-container,
.watch-on-youtube-button-wrapper,
.ytFullscreenVideoRecommendationsHost {
  display: none !important;
}
Enter fullscreen mode Exit fullscreen mode

Volume, CC, and settings buttons get relocated to a custom bottom bar to keep things tidy.

The web is still a hackable place. The browser is still yours. A little JS goes a long way. 🛠️


Set It Up Yourself

I put together a short video walkthrough of the full setup if you'd rather just follow along: https://streamable.com/ry74kw

Full written instructions including both scripts and the API key setup are over on my GitHub Gist.

Top comments (0)