Make Videos Responsive To Your WordPress Theme


So you have got yourself a Responsive WordPress Theme. All your contents and images shrinks down perfectly in ratio with the width of the screen that it is viewed on. All your readers with smart-phones are happy they do not need to scroll like crazy when reading your blog. You have just joined the elite class of bloggers who has moved to Responsive Theme.

What About The Embeded Videos

So far so good, but what about all the videos that you have embeded? Are they sizing down as well? Sad to say, I think the one area that most WordPress Theme developers have missed out is to make videos responsive as well.

So far, I have not seen any Responsive WordPress Themes that claims to work with videos as well. Themes like Thesis has not even gone responsive yet.

However, there is hope yet to make the videos responsive as well without too much of a headache.

The FitVids WordPress Plugin

Like always, if you are using WordPress, there will be something free available whenever you have a problem like this. In this case, it is called the FitVids For WordPress Plugin.

FitVids is a free plugin which you can install directly from your WordPress Admin – Plugin – Add New option. Simply type in the words, “FitVids For WordPress” and it should be at the top of the search results. Install and activate.

A simple configuration is needed after you activate the plugin.

Under Appearance – FitVids, make sure the Add jQuery option is checked. For the Enter jQuery Selector, enter “.post” without the quotation marks. Save changes and you are done.

Responsive Videos Without A Plugin

If for whatever reasons you cannot get the plugin to work or if you simply hate another extra plugin, Designer Web Wall has a simple solution by means of some easy CSS codes to make your videos elastic.

Simply copy and paste these css codes below to your stylesheet.

.video-container {
 position: relative;
 padding-bottom: 56.25%
 padding-top: 30px;
 height: 0;
 overflow: hidden;

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

Then whenever you want to embed a video, you just wrap the codes within the newly created div

<div class="video-container">
	All the </iframe> video embed codes

I’ve tested and am using both the method and it works superbly.

Some of the links in this post are "affiliate links." This means if you click on the link and purchase the item, I will receive an affiliate commission.

Divi WordPress Theme

728x90 V3