FitVids.js – jQuery Plugin to Make Video Embeds Responsive

Pixel Perfect Design comes with the responsiveness of each and every website element. When talking about video embeds and iframe contents, the responsiveness fails to keep pace.

Looking at this, FitVids.js – a jQuery plugin for fluid width video embeds came to existence that will help you to achieve fully responsive video embeds iframes resize within the container.

FitVids.JS

FitVids.js was built by Chris Coyier and Paravel to overcome the problem of embedded content responsiveness.

Let’s see more about FitVids.js jQuery plugin.

How FitVids.js Works?

With FitVids.js making embedded content responsive to its exact aspect ratio in various screens becomes easy as it wraps the video elements in a wrapper div with 100% width.

FItVids.js also removes the original height and width of the embedded elements and both are set to 100%.

In short and in simple language, FitVids.js grabs each and every embedded element especially (Iframe elements) then determines its aspect ratio, later making the width of the element equal to its container’s width and then the plugin sets the height of the embedded element equal to a new height which is calculated with the determined aspect ratio.

This is how the jQuery plugin works in the backend.

Moving further,

It is very well known that to make an element responsive to various sizes the ‘width‘ parameter plays a very crucial role. Using the parameter we can resize the embedded content to its container and make the element responsive.

Let’s see the example below:

With this, you can conclude that if with the help of CSS we can make an embedded element responsive then what’s the use of FitVids.js jQuery plugin.

To answer your question, I found a short video from Dave Rupert that will clarify all your doubts.

Now I think that’s enough for you to depict the problem with CSS hacks.

Recommended Readings:

So that’s why FitVids.js comes up to be an extraordinary jQuery plugin to make videos responsive dynamically.

Moving a bit deeper,

How to Use FitVids.js?

Let’s get started with FitVids.js plugin,

Download the copy of the jQuery plugin from the GitHub Repo.

Include the script before the </body> tag and that’s it, you’re done with it.

OR

FitVids.js CDN

There is CDN available for FitVids.js which you can directly call on your web page using the <script> tag.

Now let’s see the code of the plugin with which you can implement FitVids.js on your custom elements.

The HTML structure:

The Javascript Code:

Using this the iframe embedded video will become dynamically responsive to the size of the container.

Going to more customizations in FitVids.js jQuery plugin:

Fitvids.js Options:

In present time the jQuery plugin supports YouTubeVimeoBlip.tv*Viddler*Kickstarter*, here * means native support for these may be deprecated.

Adding your Own Video Vendor:

Now, this is a problem so to overcome this issue, FitVids.js has a ‘customSelector‘ option where you can add your own specific video vendor selector.

Let’s see how to use the customSelector option:

So, once again thanks to FitVids.js developers who introduced the feature for other video vendors.

Coming to more options:

Ignoring a Video class:

In case if you have a video which you want FitVids to ignore then there is a solution too. You just need to provide the video a custom ID or Class.

After that the Javascript code comes to play:

Recommended Readings:

Coming to next option:

Targeting Videos embedded without classes or ID’s:

If you by mistake add a video without declaring any Class or ID, then there is a solution too for the problem, you just have to target the parent of videos. Let’s see how:

Wow, these are really very handy options in FitVids.js jQuery plugin.

With such an ability, FitVids.js really makes embedded videos responsive to screen and gives a better user experience when viewing on small screens.

If you’re also looking for such a solution than FitVids.js is the perfect solution to your embedded video responsive problem.

(Visited 165 times, 1 visits today)
Share is Caring...!
This entry was posted in Web Design and tagged , , , , . Bookmark the permalink.
Amazon and the Amazon logo are trademarks of Amazon.com, Inc. or its affiliates.
Tuluzz.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for website owners to earn advertising fees by advertising and linking to Amazon(.com, .co.uk, .ca etc) and any other website that may be affiliated with Amazon Service LLC Associates Program.

Leave a Reply