responsive design for video

Make Embedded Video Responsive with FitVids.js on WordPress and Any Webpages

Do videos on your webpages display in wrong sizes and go off the screen for mobile devices? If yes, this article will guide you to make the videos responsive. 

Responsive web design is essential to deliver webpages for multiple devices with different screen sizes. The layout and the sizes of elements can automatically change with the screen size. It allows users to load the same webpages on both desktop and mobile, without visiting the page through separate URLs for the mobile theme. Most responsive webpages can be built with native HTML5 and CSS3 only.

Nevertheless, not all elements can be made responsive in that way, such as embedded videos. The video content is from an external source. Most video platforms, like YouTube, allow embedding their videos to a webpage through iframes. This disables resizing the videos while keeping their aspect ratios just by applying CSS. You can add a few additional CSS codes to make the width of the iframes responsive, but the height won’t change correspondingly.

For non-techies, you should choose a fully responsive theme for your new websites. For example, I’ve built one of my Tumblr blogs based on the Rue theme by Anchors for a few years. The theme comes with a responsive design for video embeds. It is powered by a lightweight jQuery plugin, called FitVids.js. This feature is vital for your sites if you share many YouTube videos, like me.

If you’re using WordPress with a theme that has no responsive video feature and you don’t want to change it, you can try the FitVids plugin mentioned in the next section.

For those who know a bit of code, I will guide you on how to add the feature by inserting the FitVids.js codes to your websites. It will not be a very technical procedure but you should at least know the way to customize your theme or add inline HTML codes to your webpages.


Use FitVids on WordPress

FitVids for WordPress

FitVids for WordPress

This plugin makes videos responsive using the FitVids jQuery plugin on WordPress.

Kevin Dees

It’s easy! You can find the free FitVids for WordPress plugin by Kevin Dees from WordPress.org. After the plugin installed, you can go to Appearance > FitVids to modify the settings in your WordPress dashboard.

You can use custom selectors to include videos from your video platforms. For example, we can add Facebook and Dailymotion. If you don’t understand how to modify the selectors, please read the section below for more details.

Leave the Use Google CDN option unchecked unless the plugin does not work. By default, WordPress includes jQuery for its functions. You don’t want your WordPress to request the jQuery library multiple times, which lowers your page speed. So, you don’t need to check this option.

[ Back to Top ]

Use FitVids.js on Other Web Platforms

Dark Mode
Make Embedded Video Responsive with FitVids.js on WordPress and Any Webpages 1

FitVids.js (this link opens in a new window) by davatron5000 (this link opens in a new window)

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

You can find FitVids.js from its GitHub repository, managed by Dave Rupert (@davatron5000). Its README file simply tells you that the FitVid.js depends on jQuery 1.7+. That means you need to include the two library files to your site, typically in the HTML head, by some codes like this: 

HTML

Download a copy and upload the .js files to your server, and then modify the path to link your hosted files. Alternatively, you may offload them via cdnjs, a free CDN, by copying the following codes to your HTML head section.

HTML

Next, you need to add a jQuery script to call the fitVids() function when the DOM is ready. I recommend placing the code to your page footer to prevent render-blocking. The easiest way is to target all video embeds in the HTML body using the following codes,

HTML

If you are familiar with CSS selectors, you can replace body with a container ID or class name. The fitVids.js will scan through each video embeds within the target container. It will then wrap the iframe element in a div.fluid-width-video-wrapper and apply some percentage-based CSS magic.

[ Back to Top ]

Use FitVids Custom Selector to Add Additional Video Vendors

By default, FitVids limits to the iframe elements with a source URL that contains youtube.com and player.vimeo.com when no custom selector is passed to the function. In a recent audit of my blog, I found that some embedded YouTube videos work properly while some of them didn’t scale with the screen size for mobile. The issue is produced by using youtu.be short URLs instead of youtube.com in the embed URL. To fix it, modify the code to be,

JS

You can assign multiple video vendors using a comma-separated list, for example:

JS

[ Back to Top ]

FAQ & Troubleshooting

Add a custom selector to include the root domain of the video URLs.

FitVids changes the size of a video as the full width of its container. So, try to apply CSS to modify the margin, padding, and width of the parent element of `div.fluid-width-video-wrapper`.

If you want to exclude particular video embeds, you can use the ignore option to filter the given classes.

JS

According to the README file, the FitVid.js has the following issue,

Vimeo Autoplay API is not compatible with FitVids in IE11. You must manually wrap videos you want to autoplay.

[ Back to Top ]

I hope this guide to FitVids will help you to enhance your sites with responsive web design for video embeds. If you have any additional questions, feel free to ask me in the comments section below.

If you like this post, please share it with your Facebook and Twitter. You might also support me by donating via Ko-fi.


Image Credit: Photo by Sara Kurfeß on Unsplash

scroll to top