finds.dev← search

// the find

chriscoyier/Fluid-Width-Video

★ 227 · HTML · updated Mar 2017

That maintains aspect ratio and works with all major video hosts

A 2011-era technique (with a 2017 last commit) for making embedded iframes and HTML5 video scale proportionally using a padding-top percentage hack. It's the classic 16:9 wrapper div approach that was everywhere before CSS got better. Useful as a reference but not something you'd drop into a project today.

The core padding-top trick (56.25% for 16:9) is explained clearly and still technically works in any browser. Demo files are self-contained HTML you can open directly without a build step. Chris Coyier wrote this, so the explanation is clear and the context (CSS-Tricks article) is solid.

The `aspect-ratio` CSS property landed in all major browsers in 2021 and makes this entire approach obsolete — one line of CSS replaces the wrapper div hack. Nine years without a commit means nobody has removed the outdated host-specific workarounds. The repo is effectively a museum piece; pointing a new project at it would be like using table-based layouts because that's what a 2011 article recommended.

View on GitHub →

// want more like this?

We dig through GitHub every week and send a few repos picked for what you actually care about — each with an honest take like this one.

Get finds in your inbox → Search again →