Stop Using the Padding Hack (for videos)
Tags: css, css4
Published: 2022-08-09 15:50:10

---
title: Stop Using the Padding Hack (for videos)
published: true
date: 2022-08-05 00:00:00 UTC
tags:
  - css
  - css4
canonical_url: https://timothymiller.dev/posts/2022/stop-using-the-padding-hack/
---

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:

| We used to use… | Now we use… |
| --- | --- |
| Floats, absolute positioning, and tables | Flexbox and CSS grids |
| PHP and Sass variables | CSS custom properties |
| JS animation libraries | CSS animations and transitions |
| Magical numbers for padding | `box-sizing: border-box` |
| Flexible font sizing with JS | Viewport units |

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](https://i.imgur.com/dQEKnZI.jpg). 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. <sup><a href="https://timothymiller.dev/posts/2022/stop-using-the-padding-hack/#fn1" id="fnref1">[1]</a></sup>

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:

```css
.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](https://alistapart.com/article/creating-intrinsic-ratios-for-video/) 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:

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

This is [supported everywhere](https://caniuse.com/mdn-css_properties_aspect-ratio) (except IE, of course).

Gosh it's lovely to reduce an 11 line hack down to two easy-to-remember lines. <sup><a href="https://timothymiller.dev/posts/2022/stop-using-the-padding-hack/#fn2" id="fnref2">[2]</a></sup>

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.

* * *
<section>
<ol>
<li id="fn1">
<p>I’m not sold on <a href="https://css-tricks.com/css-logical-properties-and-values/">Logical Properties</a> 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. <a href="https://timothymiller.dev/posts/2022/stop-using-the-padding-hack/#fnref1">↩︎</a></p>
</li>
<li id="fn2">
<p>No container element required, either. <a href="https://timothymiller.dev/posts/2022/stop-using-the-padding-hack/#fnref2">↩︎</a></p>
</li>
</ol>
</section>