Quick Tip: Responsive YouTube and Vimeo Embed

  • follow us in feedly
Published January 15, 2014 by Brad Knutson
Responsive YouTube and Vimeo Embed

Video is becoming an ever important aspect of content marketing. Like many other bloggers starting out with video, you probably are hosting your videos at YouTube or Vimeo. That’s great! They are both free platforms that provide cross-platform and cross-device compatibility.

There is a small problem, however. With responsive design being as popular as it is, using the default embed code might not be the best option, as it has a hard coded height and width. See this example:

<iframe width="480" height="360" src="//www.youtube.com/embed/dMH0bHeiRNg" frameborder="0" allowfullscreen></iframe>

The video embed has a hard coded height of 360px and width of 480px. This maintains the videos original aspect ratio, but it doesn’t allow for it to scale gracefully on smaller screens – such as mobile devices or tablets.

There is a simple solution to fix this problem, and make both YouTube and Vimeo embed codes responsive. It just takes a few lines of CSS.

The HTML

First, we must wrap our embed code in a container div.


<div class="video-container">
	<iframe width="" height="" src="//www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe>
</div>

Your iframe embed code will look differently depending on which platform you use (YouTube or Vimeo) and what aspect ratio the video has, but thanks to the CSS in the next step, it won’t matter, you can copy and paste your embed code as is.

The CSS

Now onto the heavy lifting – the CSS.

16:9 Ratio Videos

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

4:3 Ratio Videos

.video-container {
    position: relative;
    padding-bottom: 75%; /* 4:3 */
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

The Result

YouTube

Vimeo

Same Embed Code, Smaller Container Width

If you want to see this method in action, resize your browser or view it on a mobile device. If you’d rather not do either of those, I’ve added two examples below with smaller container widths so you can see that the video scales gracefully.

The same exact embed code from above is used below, it’s just the container element that is width limited.

400px Wide

250px Wide

Not all that complicated right? Just a few lines of CSS ensure that our videos look great no matter what device they are shown on.

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">