Make All Embedded Content Responsive with Reframe.js

The trickiest partial about embedding videos is removing a breadth tallness correct. These numbers define a aspect ratio and when they’re off you’ll get a wonky video player.

50 Useful Responsive Web Design Tools For Designers

50 Useful Responsive Web Design Tools For Designers

[series_rwd] For a past few days, we have showed we some of a best WordPress and Joomla responsive…Read more

This is true for all embedded elements such as iframes and amicable media widgets. And these things can be even trickier with manageable pattern since they’re customarily not manageable elements.

But with Reframe.js, we can make any component manageable for any aspect ratio.

reframejs homepagereframejs homepage

This is maybe one of a simplest nonetheless many profitable JS plugins on a web. It was indeed created by Dollar Shave Club that surprisingly has a possess GitHub page.

Reframe is one of their giveaway plugins built for developers who wish a easier approach of handling manageable embedded content.

The apparent law-breaker is embedded video from sites such as YouTube and Vimeo. It’s notoriously difficult to make these elements responsive though CSS hacks.

With Reframe.js, we usually select whatever component we wish to aim and reframe it regulating a reframe() function.

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

Then, we usually pass a duty a selector for whatever elements we wish to reframe. Load a page and boom! You should be all set.

For example, let’s contend we have a few videos embedded on your site. You can add a category .video to a embed, and use that as a selector. Reframe automatically adds a div and category around it to emanate a manageable style.

So your JavaScript code would demeanour like this:


Pretty elementary right?

This formula targets all elements with a category .video and makes them responsive. No additional hacks, no additional CSS. Granted there’s zero wrong with regulating a CSS process though we will need to manually wrap all embedded videos with a additional class.

Reframe usually saves we that additional step and brings it all by with JavaScript. To check out a demo and find some simple formula snippets, revisit a Reframe.js homepage. You can download a duplicate of a code true from a GitHub repo.

30 Useful Responsive Web Design Tutorials

30 Useful Responsive Web Design Tutorials

[series_rwd] So we’ve reached a finish of a “Responsive Web Design week”, tonight’s post will be a last…Read more

Add Comment