Was trying to figure out how to get a YouTube video to be responsive and came across this handy tidbit.

Here’s your YouTube code:

<iframe src="//www.youtube.com/embed/4_i5LEfkNig" height="360" width="640" allowfullscreen="" frameborder="0"></iframe>

Strip out all the attributes in the YouTube iframe and wrap the whole thing with a div. Add a class to the div.

 <div class="responsive-container">
<iframe src="//www.youtube.com/embed/4_i5LEfkNig" frameborder="0" allowfullscreen>
</iframe>
</div>

Then applying CSS to the class and the iframe inside:

.responsive-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.responsive-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

The technique uses the standard approach of placing an absolutely positioned element inside a relative one, with an offset.

After you have typed in some text, hit ENTER to start searching...