Responsive YouTube Videos In WordPress

If you build a responsive theme it is important that you know how to make YouTube embeds responsive in WordPress. There are a lot of solutions out there for this but most of them use a plugin that either makes you enter your videos through a shortcode or wraps all of your Iframes in a responsive wrapper. How about we take a little time to build it into our theme so that we aren’t cluttering our site up with more plugins. It is actually really simply!

The Problem

So you have built a beautifully responsive WordPress theme that works on all devices. Then you or your client adds a YouTube video into their content…ya know for better SEO…and it shoots out the right side of the screen! Now it looks completely broken. You, as a detail oriented web developer, want to make sure that any YouTube video will be responsive inside your theme. But you also know the importance of keeping your site as lightweight as possible so we don’t want to just go add ANOTHER plugin.

Example

The YouTube video below should like up with the same width as the two image boxes above it. On the tablet size it shoots off the page and is partially hidden.
example of broken YouTube embed

The Solution

First let’s set up the css you will need to keep the Iframes the right aspect ratio. Let’s start by creating a class that will be attached to div that will wrap the YouTube video. I called mine iframe-flexible-container but you can name it whatever you want. Just make sure that you remember it because we will need to use it later in a small snippet of jQuery. The next thing we need to do is add additional styling to elements that might appear inside this container we just created. We need to address iframes, objects, and embeds. Feel free to copy and paste the code below into your project.

.iframe-flexible-container {
    position: relative;
    padding-bottom: 56.25{d28a336400473281ecafcd3e581d1c42e2ddc167997abc26aab972fb90aa55e1};
    padding-top: 30px;
    height: 0;
}
.iframe-flexible-container iframe,   
.iframe-flexible-container object,  
.iframe-flexible-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100{d28a336400473281ecafcd3e581d1c42e2ddc167997abc26aab972fb90aa55e1} !important;
    height: 100{d28a336400473281ecafcd3e581d1c42e2ddc167997abc26aab972fb90aa55e1};
}

Now we have the css needed but how do we get a div wrapped around every YouTube video dynamically? Well I like to use jQuery to accomplish this task. Make sure that your theme enqueues jQuery or this won’t work. If you need help with this read my article on Linking Scripts. If you are still lost, go into your functions.php file and add this code at the very bottom of the file.

function activate_jquery() {
	
        wp_enqueue_script( 'jquery');
}

add_action( 'wp_enqueue_scripts', 'activate_jquery' );

Now go into your header and add the below script. Notice in the code that we open and close script tags and then create a document ready function. Inside the document ready function you will add the single jQuery function that will wrap each and every iframe with a div with the class we created earlier. If you would like to know a little more about using jQuery in your WordPress themes check out my article on How To Use JQuery with WordPress.

<script>
   jQuery(document).ready(function(){

	jQuery('iframe').wrap("<div class='iframe-flexible-container'></div>");

   });
</script>

That is it folks! It is really that simple to make YouTube embeds responsive in WordPress. The jQuery we wrote will simply scan your website for Iframes and then wrap them with the class we wrote above. Then the css inside that class will do all the work for you. I hope that this can be a neat little tool to add to your arsenal of development tricks!

Email Opt-in Plugin For WordPress

Providing your clients with a solution to gain more customers can build a lasting relationship! The best way to attract new customers or make a sale is through email marketing, but you have to get people to opt-in first! This email opt-in plugin for WordPress makes it easy and is very effective.

Bloom Email Optin Plugin