PHPMatters Help You Better Hosting Your PHP-based Sites
How to Make Videos Responsive in WordPress?

How to Make Videos Responsive in WordPress?

In most cases, the embedded videos are not responsive on your WordPress powered site. In the online market, there are a number of free and commercial WordPress responsive themes, but most of them fail to make your videos incorporate with different web browsers and screen resolutions.

The good news is that many WordPress developers have come out to address this annoying issue, and a variety of plugins has been put forward to help achieve video responsiveness. At this place, we are about to introduce the most simple way to make your videos responsive in WordPress via this “FitVids for WordPress” plugin. Note that, a manual method is included as well.

How to Make Your Videos Responsive via a WordPress Plugin?

As above, this “FitVids for WordPress” plugin is extremely useful in making your videos from YouTube or other social networking platforms responsive. To enable this plugin in WordPress, the first thing you need to do is “Install” and “Activate” it as is described in this tutorial. If done correctly, you will find this “FitVids for WordPress” option under the “Installed Plugins” tab.

Responsive Video WordPress - Enable FitVids for WordPress

After that, navigate to “Appearance” > “FitVids” and you will be prompted to enter a CSS selector for this “FitVids for WordPress” plugin to work. By default, WordPress will add .post class to your articles, and you may use that directly. In some cases you are using the videos that are not supported by this plugin, you will need to input a custom selector as below.

Responsive Video WordPress - Customize this WordPress Plugin

By the way, it is required to check the jQuery box on the top of this settings page especially when you are running jQuery 1.7+. Ultimately, do remember to click the “Save Changes” button to take effect. In order to check whether the embedded videos can adapt to browsers accordingly, you can try to re-size your own screen sizes.

How to Make Your WordPress Videos Responsive Manually?

Without doubt, the noted automatic method via a WordPress plugin is easy-to-operate, but it still has some problems. Sometimes you may find for various reasons these handy plugins fail to work in certain WordPress themes, and you might as well use the current plugin rather than adding another one. In this case, we will walk you through how to manually make videos responsive in WordPress as follows.

To start with, you shall go back to the WordPress dashboard and head over to “Appearance” > “Editor.” As you can see, there are various editing options on the right-hand of admin page, and all you need to do is move your mouse over the following style.css option.

Responsive Video WordPress - Make Videos Responsive Manually

Upon entering, you only need to copy and paste the following shortcode to this file. Note that, this configuration code should be placed at the footer of your style.css file.

.comments-area > li.comment {background: none; position: relative; width: auto;}
.comment-metadata {float: none;}
.comment-author .fn, .comment-reply-link, .comment-reply-login {color: #333;}
embed, iframe, img, object, video {max-width: 100%}

Make sure you will make a hit on this “Update Files” button once you’ve completed everything. Till now, you have successfully made videos responsive in WordPress.