YouTube makes it easy to copy-paste a video embed. LOVE THAT! But, the default embed isn’t responsive, so it is guaranteed to look shit wherever you embed it. I’ve drug this snippet around the internet with me for years. /* youtube embed wrapper */ [data-responsive-youtube-container] { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; margin: 1em 0; } [data-responsive-youtube-container] > iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } I adapted it to use , my data attributes specification of . But I didn’t write the styles. I hate magic numbers like , and I would have tried to avoid it until giving up 😆 AVO 🥑 CSS BEM 56.25% Usage Copy a YouTube embed from the share sheet. Paste that embed in an HTML or markdown file. Wrap it in a block-element container with the selector. data-responsive-youtube-container Enjoy container-aware responsive videos! Embed responsively! Bonus This works with layouts as well. Around , you’ll see this paired with a flex and grid layout. chan.dev Help Me Attribute This If you know where I originally swiped this from, let me know so I can give the author credit here. I’m on Twitter and Discord. @chantastic
