Uncategorized

How to Make Embedded YouTube Videos Responsive in WordPress

By June 30, 2014 No Comments

With mobile becoming more popular every day, it’s important to make sure your website is responsive so it looks great on all devices. Unfortunately, embedded YouTube videos are currently not mobile responsive in WordPress. Here’s a quick solution to that problem so your videos will resize to fit any screen.

Add this code to your CSS:

.responsive-video {
    position: relative;  
    padding-bottom: 56.25%; 
    padding-top: 30px; 
    overflow: hidden;
}

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

Add the “responsive-video” class to your embed code:

<div class="responsive-video">EMBED CODE GOES HERE</div>

And that’s pretty much it. This also works with Vimeo or any other videos that you want to embed.

Tip: Another thing I like to do with embedded videos is hide the related videos that show up at the end. Just add &rel=0 to the end of your youtube url to hide the related videos. (Or just uncheck that option when creating the embed code)

 

Leave a Reply