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
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
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:
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.fitvids.js"></script>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.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.min.js"></script>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,
<script>
$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$('body').fitVids();
});
</script>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,
$('body').fitVids({
customSelector: 'iframe[src*="youtu.be"]'
});You can assign multiple video vendors using a comma-separated list, for example:
$('body').fitVids({
customSelector: 'iframe[src*="youtu.be"], iframe[src*="facebook.com"], iframe[src*="dailymotion.com"]'
});[ Back to Top ]
FAQ & Troubleshooting
[ 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 enjoy this post, please share it on Facebook and Twitter. You might also support us by making a donation through Ko-fi.
Image Credit: Photo by Sara Kurfeß on Unsplash