How to Make Videos Responsive in WordPress

With the release of WordPress 3.0, embedding YouTube videos in your articles has become easy. Simply paste the embedding code from video site into your text editor and WordPress will do the rest of work.

This is all great, but the embed video’s width and height is fixed and you can’t change it. What might happen is that either the video is too small for your theme, or too big to fit into the content area.If you are using a responsive theme for your site, you will find that the video doesn’t scale as you resize the browser and ultimately breaks your theme.

To fix this, we need to make use of a script – FitVids – that will turn your embedded video into a full-width responsive object and automatically scale as you resize the browser.

How to Make Videos Responsive in WordPress using FitVids

There are two ways to make all embedded videos on your WordPress responsive. First way is to integrate the FitVids script directly into the theme. The below screencast from CSS tricks can guide you on it.

But for those who are not experienced in coding, here is a plugin that can do it for you: FitVids for WordPress.

1. Install and activate the FitVids for WordPress plugin.

2. Go to “Appearance -> FitVids”.

3. If you are absolutely sure that the jQuery script is already included in your theme, leave the “Add jQuery” field blank. If not, check the box beside “Add jQuery”.

4. The “jQuery selector” field is a bit tricky because it can be different for each site. For most instance, you can just enter the word “body” (without the quote) in the input field and it should work. However, if you want to micro-target a specific container with video, you can place the id/class of the container in this field, for example: “#video-container“, “#content“, “.entry-content” etc.

Note: The “#” and “.” in front of the text represent the “id” and the “class” in CSS respectively.

5. Now, check out the post with an embedded video. You can find it completely responsive.

Final word: FitVids is an easy to use script to convert your embedded video into a responsive object. Try it out and let us know if this is useful to you.