How to Make Your WordPress Videos Responsive

WordPress

Responsive web design – themes capable of adjusting the layout of a website to the size of a user’s device – has been a great addition to WordPress and the internet as a whole, giving webmasters the chance to cater to the ever-expanding demographic of smartphone and tablet users. We’ve talked about Responsive Web Design and even suggested a couple of Responsive WordPress themes.

Unfortunately, while themes are able to adjust text and images to meet the needs of the user, videos are often left disproportionate. When you embed a video on your site, these are not responsive by default. Obviously, this is far from ideal, especially if you rely heavily on video content – as is the case with many WordPress users.

Luckily, this is WordPress we are talking about and with WordPress there is always a way round a problem. For this particular issue the solution is called FitVids.

Installing FitVids

FitVids, as you have probably already guessed, is a plugin that is designed to make video embeds responsive. To get the plugin you will need to log in to your WordPress dashboard, go to Plugins > Add New and enter “FitVids for WordPress” into the search field.

When you’ve located the plugin, click on Install Now, followed by Activate Plugin when the installation is complete.

Using FitVids

Once FitVids is activated, go to Appearance and scroll down to the newly added FitVids option. On this page, you only need to add a jQuery selector for the plugin to work. WordPress will input .post into the field automatically and this will meet your requirements.

You do not need to anything else other than to save the settings and preview your site. To check that videos have been resized correctly, view your site on various screen sizes.

Installing FitVids Manually

If you would prefer not to use the FitVids plugin (not everyone likes to overload their sites with plugins), it is also possible to perform a manual install.

To do this you will firstly need to download and unzip the FitVids jQuery plugin from GitHub.

Next, using your preferred FTP client, access your WordPress theme directory and upload FitVids.js-master to the js folder. If your theme doesn’t have such as folder, simply create one and upload the file there.

In the js folder, create a new file called FitVids.js and paste in the following code:

(function($) {

$(document).ready(function(){

// Target your .container, .wrapper, .post, etc.

$(".post").fitVids();

});

})(jQuery);

This code will do what .post class does in the plugin.

Finally, in the functions.php file of your chosen theme, paste in the following code to add javascripts and make videos responsive:

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);

Share it!Share on FacebookTweet about this on TwitterShare on Google+Email this to someone

Our Recommended Wordpress Web Hosting Provider

WordPress

WHC.CA
Get a 50% Discount by using our link.

WHC.ca

Reliable host, with excellent customer service and an easy one-click Wordpress installation. Our recommendation to host a Wordpress blog.

Leave a Reply

Your email address will not be published. Required fields are marked *