Embedding YouTube looks simple right up until CSP starts blocking half of it. You add an <iframe>, refresh the page, and suddenly the browser console is yelling about frame-src, img-src, or some random googlevideo.com request you didn’t explicitly ask for. That’s normal. YouTube embeds pull in more than just youtube.com, and playlists add a couple more moving parts. Here’s the practical reference I wish I had the first few times I locked this down. ...
YouTube embeds look simple until CSP gets involved. The usual failure mode goes like this: you paste an <iframe> embed, add autoplay=1, ship a strict policy, and suddenly the video is blank or blocked in the console. Then someone “fixes” it by throwing https: into frame-src or loosening half the policy. That works, but it’s lazy and expensive from a security standpoint. Here’s the version I’d actually ship for a developer-facing site. ...
YouTube embeds look simple right up until your Content Security Policy starts blocking half the player. I’ve seen this trip up a lot of teams: the page works fine locally, then production sends a strict CSP header and suddenly the iframe is blank, thumbnails don’t load, or the player API silently fails. The fix usually isn’t “disable CSP.” It’s understanding which directives YouTube actually hits, and keeping the allowlist as tight as possible. ...