Responsive iFrame without JavaScript

A long time ago, before I understood the power of css I had a bad habit. I used JavaScript for some simple tasks. I didn’t know any better.

What if you could set a container height to be a percentage of it’s width.

That’s the “Aha!” moment… Using the css below, you set a container of the iFrame to have a padding bottom. The padding of an element is relative to the elements width. Durrr…

Then we set the iFrame object to be position absolute, with a height of 100% and a width of 100% (or top: 0, left: 0, right: 0, bottom: 0) — I do both.

Anyways, here’s a cute little SASS mixin. Provide a ratio (default: .5625 works for most videos) and behold the magic!

Know any ways to improve or reuse this?

I’m sure I’ll find more ways to use the padding bottom of an object to create responsive heights. Share yours with me on twitter @joeydsmith