Skip to content

feat: add option to blur thumbnails - #4218

Open
Ishaan488 wants to merge 2 commits into
code-charity:masterfrom
Ishaan488:blur-thumbnails
Open

feat: add option to blur thumbnails#4218
Ishaan488 wants to merge 2 commits into
code-charity:masterfrom
Ishaan488:blur-thumbnails

Conversation

@Ishaan488

Copy link
Copy Markdown

Category

Feature Request

Problem

Users lack an option to blur YouTube thumbnails to protect privacy, avoid spoilers, or reduce visual distractions. Additionally, previous blur attempts caused a jarring "flash" of the unblurred image when hovering before the video preview loaded.

Solution

Added a "Blur thumbnails" toggle that blurs static thumbnails but allows preview videos to play normally on hover.

Before After
screenshot-1784397030441 Screenshot 2026-07-18 232146

Screenshot 2026-07-18 232256

Untitled design
  • Sets it-blur-thumbnails="true" on <html> when enabled.
  • Uses pure CSS filter: blur(10px) in general.css for thumbnails across home, search, sidebar, and playlists.
  • Included updated selectors (.ytThumbnailViewModelImage, .ytwTopLandscapeImageLayoutViewModelHostImageHoverOverlayContainer) to support modern YouTube DOM layouts and image ads.
  • Removed :hover CSS unblur rules on the static image to prevent the unblur "flash", allowing the native video preview to overlay smoothly.
  • Registered the blurThumbnails string in _locales/en/messages.json.

Alternatives

Considered using a JS-created overlay element (like the night-mode dim feature). A pure CSS filter is simpler, more performant, and perfectly matches the existing squared_thumbnails implementation.

Testing

  • Manually tested in Chrome: toggling the switch successfully blurs/un-blurs thumbnails and image ads on the home, search, and sidebar pages.
  • Verified that hovering plays the preview video normally without the static image flashing underneath.
  • Ran npm test — all 88 tests pass successfully.

Closes #4182

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add blur for thumbnails

1 participant