Blog: Web Design
YouTube logo on tablet

Responsive YouTube Videos in WordPress

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

Mobile web usage has now exceeded desktop web usage, so it’s important to make sure your YouTube videos are as mobile-friendly. Since YouTube and other video services give you an embed code with a declared height and width, the video often goes right off the page on smartphones. That’s not the type of experience you want your customers to have on your website. Here’s how to ensure you always have responsive YouTube videos on your WordPress website.

The Old Method For Responsive Videos

When mobile-friendly web design first appeared, I used a method I learned from CSS-Tricks. This method was better suited for developers than business owners or regular people.

This method (still) works by putting another HTML element around the code that YouTube gives you for video embeds. The surrounding element would be positioned relatively with CSS, and the video iframe would be positioned absolutely. Extra padding at the bottom of the surrounding element would preserve the 16:9 ratio of the video.


/* Pure HTML and CSS for responsive YouTube videos */
/* HTML First */
<div class="video-container">
  <iframe width="892" height="502" src="https://www.youtube.com/embed/Go4n4Zw1cKM" frameborder="0" allowfullscreen></iframe>
</div>


/* Now the CSS */
.video-container {
  height: 0;
  overflow: hidden;
  padding-top: 30px;
  padding-bottom: 56.25%;
  position: relative;
}
.video-container iframe, .video-container object, 
.video-container embed {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

While remembering to always place this extra div in place is fine for web developers, most people simply cut and paste the YouTube embed code, and need a more practical solution. For embeds with varying aspect ratios, this is also unpredictable, though there are code-intensive solutions for non-16:9 ratios out there.

FitVids.js

FitVids is a jQuery plugin written by Chris Coyier and Paravel that takes these methods and automates them. It looks for elements or selectors that you define, like iframe, and wraps them in a fluid element, similar to the method above. This is easier for web developers, but probably still a little inaccessible for normal people.

FitVids For WordPress

Note (October 2015): The FitVids plugin on the WordPress repo dequeues jQuery and then loads jQuery from the Google repo. This can create plugin conflicts, so it’s best to use the native jQuery plugin, and put it into your custom theme.

FitVids In WordPress Admin

YouTube uses an iframe element for embeds. (So does Google Maps). If you are just copying and pasting the URL of the video into the Visual Editor, you may need to target either the selector .embed-youtube.

WordPress and YouTube try to help you out. When you add just the video URL, and not the embed code, This would look like this.


/* What happens when WP sees a YouTube URL in the Visual Editor */
<p>
   <span class="embed-youtube">
     <iframe class="youtube-player"></iframe>
   </span>
</p>

If you need help setting this up, contact your web developer.


All the work we do to optimize for mobile isn’t for us, it’s for our customers, and making things easier for them when they interact with our business. I’d like to know, what’s the biggest challenge you face as a business owner when it comes to customer experience on mobile?

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

2 comments on “Responsive YouTube Videos in WordPress

Join the Conversation

Your email address will be kept private. Required fields marked *.