I made a short demo video for my extension, uploaded it to YouTube, and it looked perfectly crisp there. Then I embedded it on my landing page and it turned into a blurry mess — soft edges, fuzzy text, the works. Same file, same upload, two completely different levels of sharpness depending on where I watched it.
My first instinct was to blame the export. I'd built the video from screenshots with ffmpeg, so I assumed I'd gotten a bitrate or a scaling flag wrong. I was about ten minutes from re-rendering the whole thing at a higher quality when I decided to actually check what YouTube was serving.
Here's the part I didn't know: YouTube's embedded player picks its quality based on the player's pixel dimensions, not your connection speed. When the auto setting sees a small player, it quietly serves a lower resolution to "save bandwidth" — often 480p or even 360p. On youtube.com the player is large (or fullscreen), so it hands you 1080p and everything is sharp. In a small embed on your own page, it decides a low resolution is good enough. The video was never the problem. The container was.
You can confirm this in about five seconds: right-click the embedded video, open the gear/settings icon, and look at Quality. Mine was sitting on 480p. I bumped it to 1080p by hand and the picture snapped sharp instantly — proof that the source file was fine the entire time and the player had just been lowballing me.
My embed container was only 820px wide. So the fix was almost embarrassingly small: I widened it (to 960px). A bigger player nudges YouTube's auto quality upward on its own — no re-export, no re-upload, one line of CSS. If you want it truly bulletproof and independent of YouTube's guessing, the other option is to self-host the mp4 and play it with a plain
The whole thing cost me an hour of suspecting ffmpeg when the real culprit was a div that was 140 pixels too narrow. Which is very on-brand for building software solo: the scary-looking problem is usually a small, boring one wearing a costume.
The video, for the record, was a demo of NotebookBloom — a Chrome extension that turns NotebookLM (now also called Gemini Notebook) into a real research workspace: citation export (APA/MLA/Chicago/BibTeX), Anki flashcard export with the source kept attached, and search across all your notebooks. It's on the Chrome Web Store and on my site — now with a demo that's actually in focus.
If your embedded YouTube video looks worse than the same video on YouTube itself: don't touch the file. Check the player size and the quality dropdown first. You'll probably save yourself a pointless re-render.
Site: https://notebookbloom.com · Chrome Web Store: https://chromewebstore.google.com/detail/fmnhogknjhlaicceielblddajjabjlha
— building NotebookBloom in public
Top comments (0)