Embed Videos Responsively
Recorded on March 6th, 2016
If you need to embed YouTube or other videos in an iframe on a responsive website, the trick is to wrap the iframe in a div and use CSS to style a box with an “intrinsic ratio”. The first time I saw it was on A List Apart in 2009. Sure, I get it, but I would have never thought of it.
I had forgotten how to do this and needed a quick way to embed a YouTube video. I found Embed Responsively, which is a quick and dirty way to plug in a video URL and get a responsive video container using inline styles. Ideally, you would do this yourself by defining the same styles in your CSS one time. After that, you’d only have to remember to wrap your YouTube iframe in a
<div class='embed-container'>. But if you haven’t had time to set that up, Embed Responsively is a perfect resource.