No products in the cart.
Plugins
How to Make Your Videos Responsive in WordPress with FitVids
05
Oct
Oct
When you embed a video in WordPress, by default these videos are not responsive. With the rise of responsive WordPress themes, users visiting your site on smaller screens will see video containers that are stretched and disproportionate. In this article, we will show you how to make your videos responsive in WordPress with FitVids.
FitVids is a jQuery plugin which allows you to make your video embeds responsive. If you want to use it on your WordPress site, then all you need to do is install and activate FitVids for WordPress plugin. After activation, you need to go to Appearance » FitVids and enter a CSS selector class. WordPress automatically adds .post class to the articles, so you can just use that.
That’s all, save your changes and preview your site. You would need to re-size browser screen to see videos adjusting themselves accordingly.
Manually Add FitVids to Make Your Videos Responsive in WordPress
If you don’t want to install the FitVids for WordPress plugin, then you can add FitVids jQuery plugin manually. First thing you need to do is download and extract FitVids jQuery plugin to your computer. Now you need to upload the extracted FitVids.js-master folder to your theme’s js directory.
You need to connect to your website using an FTP client like Filezilla and open your theme directory. It is possible that your WordPress theme may not have a js folder. If it is not there, then you need to create one and then upload FitVids.js-master folder from your computer.
Inside the js folder, you need to create a new file and name it FitVids.js. Edit this file and paste this code inside it.
(function($) {
$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$(“.post”).fitVids();
});
})(jQuery);
$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$(“.post”).fitVids();
});
})(jQuery);
The above code tells FitVids to look for .post CSS selector class. Now that you got FitVids ready, it is time to properly add javascri in your WordPress theme.
Simply, copy and paste the following code in your theme’s functions.php file:
wp_enqueue_script(‘fitvids’, get_template_directory_uri() . ‘/js/FitVids.js-master/jquery.fitvids.js’, array(‘jquery’), ”, TRUE);
wp_enqueue_script(‘fitvids-xtra’, get_template_directory_uri() . ‘/js/FitVids.js’, array(), ”, TRUE);
Once you do that, you’re done. You have successfully made your WordPress videos responsive.
We hope that you found this article useful. For feedback and questions please feel free to leave a comment below or join us on Twitter and Google+.
