Reframe.js – Make Embedded Elements of a Webpage Responsive
Website Responsiveness now has become a mandatory task to follow up. Making elements responsive one by one is a tough task to overcome with especially when it comes to videos, embedded or iframe contents.
Reframe.js – To maintain the perfect aspect ratio, width and height of embedded videos, it is the perfect solution.
Usually, we use media queries to make any element responsive as per the screen and device. But it becomes a cumbersome task when dealing with embedded content or iframe content.
A very simple, easy and lightweight JS plugin that plays a valuable role when it comes making iframe contents responsive.
Let’s dig Reframe.js a bit more.
How Reframe.js came to Market?
Without the use of CSS hacks and tactics it is near to impossible to make embedded contents responsive, so a jQuery plugin named ‘Fitvids‘ came to the market which was built by Chris Coyier (Founder of CSS-Tricks).
Looking at this the Dollar Shave Club developed a lightweight plugin ‘Reframe.js’ that does not need jQuery as Fitvids needs to make embedded content responsive. Reframe.js is very small (~1.3kb) & with minimal dependencies, that’s why making it a highly valuable JS plugin to tackle iframe contents.
How to Use Reframe.js?
Include the downloaded files into your web page.
Now you can go further making elements responsive with Reframe.js
The basic Reframe.js function is:
Let’s say you want to make all your videos in your website responsive to the screen then you can use the reframe() function to make all of them to fit the size of your screen:
Now, this code will grab all the classes with the name .video and make pretty responsive to the screen.
Was that not easy? No jQuery tough function, no logics, no CSS hacks.
Now if you want to make any other element with class name responsive, you can do with the below syntax.
Now lets’ see you want to make the iframe content responsive then you can do like this:
That was also easy to do.
Reframe.js with jQuery:
Now if you’re interested and expert in jQuery then Reframe.js allows you to code in jQuery too.
$('iframe').reframe(); // While using a custom class name $('iframe').reframe('classname');
If you want to read the full documentation of Reframe.js then you can visit the official website.