Make All Embedded Content Responsive with Reframe.js

By Jake Rocheleau. in Web Design. Updated on July 13, 2022.

The trickiest part about embedding videos is getting the width & height correct. These numbers define the aspect ratio and when they’re off you’ll get a wonky video player.

This is true for all embedded elements such as iframes and social media widgets. And these things can be even trickier with responsive design because they’re usually not responsive elements.

But with Reframe.js, you can make any element responsive for any aspect ratio.

This is perhaps one of the simplest yet most valuable JS plugins on the web. It was actually created by Dollar Shave Club which surprisingly has its own GitHub page.

Reframe is one of their free plugins built for developers who want a simpler way of handling responsive embedded content.

The obvious culprit is embedded video from sites such as YouTube and Vimeo. It’s notoriously difficult to make these elements responsive without CSS hacks.

With Reframe.js, you just select whatever element you want to target and reframe it using the reframe() function.

Start by adding the Reframe.js plugin to your web page. You can download a copy from GitHub, and it’s only 1KB minified.

Then, you just pass the function a selector for whatever elements you want to reframe. Load the page and boom! You should be all set.

For example, let’s say you have a few videos embedded on your site. You can add the class .video to the embed, and use that as the selector. Reframe automatically adds a div and class around it to create the responsive style.

So your JavaScript code would look like this:

reframe('.video');

Pretty simple right?

This code targets all elements with the class .video and makes them responsive. No extra hacks, no extra CSS. Granted there’s nothing wrong with using the CSS method but you will need to manually wrap all embedded videos with the extra class.

Reframe just saves you that extra step and brings it all through with JavaScript. To check out a demo and find some basic code snippets, visit the Reframe.js homepage. You can download a copy of the code straight from the GitHub repo.