Reframe.js Notes
FitVids.js is still a perfectly workable mini plugin for making videos (or anything) responsive. You need it, or something like it, for sites that have things like YouTube or Vimeo videos, Instagram embeds, or really anything that’s not responsive in the aspect-ratio sense. resize their width/height in an aspect ratio friendly way, // do not.
Reframe.js is kind of a modernized version of FitVids.
- It’s bower and npm friendly.
- You can
requireit. - It doesn’t need jQuery.
While they largely do the same thing, there are some slight differences:
- FitVids injects the CSS it needs while Reframe expects you to add it to your stylesheet.
- You call FitVids on a container to search for elements in. You give Reframe selectors directly. You can customize what gets found and filter with either.
When we tweeted it, there were several responses along the lines of:
Why would you use this when you can just use the padding hack?
Indeed, these both use the padding hack, or “intrinsic ratios”. Wrap a container element around the thing, make it height: 0; padding-top: 56.25%; position: relative; then absolutely position the element within to cover it entirely. But doing it that way means:
- You have to place the wrapper element in your content yourself.
- Everything you embed better be 16:9.
Using either of these libraries means:
- The wrapper gets injected for you.
- What you embed gets measured and the correct aspect ratio applied.
Both are valuable. I don’t wanna hand-write div wrappers on stuff, I just wanna copy and paste embed code. And not all things are 16:9.
Reframe.js Notes is a post from CSS-Tricks
