Stop Using the Padding Hack (for videos)

This is a PSA for myself more than anyone. CSS has come a long way since I started using it.

Most of the “hacks” we used in CSS back in 2010 have been replaced with better alternatives. Off the top of my head, here are a few paradigm shifts we’ve made in the last decade:

Today is a great day to be a CSS developer. I used to spend hours (sometimes days) wrestling with layouts in CSS, but no longer. Most of my layout problems in CSS are resolved with no more than five lines of CSS, and it’s a beautiful thing.

Centering something in CSS? No longer a meme. Using Flexbox, centering things is effortless.

It’s not easy to learn new things constantly and re-learn your profession every year or two, but in the case of CSS, it’s worth it. Nearly everything is easier and faster today than it was five years ago. ^[1]

But there’s a few new CSS features that I haven’t managed to integrate into my head yet. One of the most obviously beneficial is aspect ratio. For many years now we’ve used a padding hack to simulate aspect ratio. This is often used for embedded videos, such as YouTube videos, and it looks like this:

.video-container {
  position: relative;
  padding-bottom: 56.25%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

This technique was pioneered in ALA back in 2009. It’s a good trick, and even today if you search for “responsive videos css” the top results are all this same trick.

But it’s no longer necessary! The padding hack above simulates a 16 / 9 aspect ratio. We use that because that’s what most YouTube videos use. Rather than using the semi-magical 56.25% padding hack, these days you can spell out the exact aspect ratio that you want:

.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

This is supported everywhere (except IE, of course).

Gosh it's lovely to reduce an 11 line hack down to two easy-to-remember lines. ^[2]

I have undoubtedly searched “responsive videos css” hundreds of times, because the padding hack was dense, hard to remember, and hard to write. It was always easier to copy/paste from the CSS Tricks article. But no more!

CSS continues to get better and better over time, and I’m always so happy to leave clunky (albeit brilliant) hacks like the above in the historical dustbin.

1. I’m not sold on Logical Properties though. In contrast to everything else on this list, Logical Properties are denser, harder to understand, and seem to serve little purpose in most situations. But I digress. ↩︎

2. No container element required, either. ↩︎