Make videos responsive in WordPress with Fitvids

You can make videos responsive in WordPress with a script called Fitvids , it is a great solution for responsive video and it out of the box supports YouTube, Vimeo, Viddler and others, here’s how to get it going in WordPress for responsive video goodness.

Download the Fitvids zip and grab the jquery.fitvids.js file, add this to your child theme’s javascript folder.

Enqueue the fitvids javascript file, plus we have to call another file as known as a jQuery initiate file, add this content and file fitvids-init.js to your functions.php file…

The first call is loading the fitvids script, the second call will need to be a file we create also in the js folder that calls the HTML container (this container we need to actually create in the markup) of the video, so in the js folder name a file fitvids-init.js and add …

jQuery(document).ready(function($){
 // Target your .container, .wrapper, .post, etc.
 $(".video-container").fitVids();//here the container CSS element is .video-container
 });

The key thing here is to use the container video element as your class name – above it is used as .video-container name this appropriately or as a descendant selector to select a bunch of videos to responsively select.

The final thing I like to do is set a max-width CSS selector so on a wider screen the width does not blow out to a ridiculous width – so using the same selector adding something like the below added into style.css – just adjust the width preference to the maximum that you would like.

/*
video
----------------------------------- */
.video-container {
 max-width: 600px;
 margin: 0 auto;
}

Example