How to Embed Responsive YouTube Videos

Instructions on how to add YouTube and Vimeo videos to a page, so that they expand and shrink based on the size of the visitor's screen.

This method also works if you use more than one theme to display the same content.

  • For example, you may have a normal theme suitable for desktops, and a mobile theme for the same website. In that case, the YouTube video will conform to the container which it is in (i.e. the desktop theme or the mobile one).

Our Challenge

When we decided to change the theme of Complete Hosting Guide, we came across an initially frustrating situation. We had switched to a responsive theme, that adjusts according to the size of the viewer's screen. This was great, until we got to the pages with embedded YouTube videos. The embed code provided by YouTube contains a width and a height, and does not scale with the size of the screen.

Luckily we found an article from AVEX Designs that had a simple CSS fix for that.

Embed Responsive Videos with CSS

Prerequisite

You will need a theme or template that is already responsive for this to work. The video takes it's cues from the container which it is in. So if your page shrinks to fit a mobile device or tablet, so will the video.

If your website is not responsive or you place the html code in part of the website that is fixed width, it will expand only to the dimensions of the container.

CSS

First you will need to add this to your style sheet.

.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%;
}
If you want some white space before and after the video, add a margin to the top and bottom, by modifying the video-container class, like so:

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

HTML

Next, you will need to add a DIV with the class video-container around the YouTube embed code.

<div class="video-container">
         <iframe width="640" height="360" src="https://www.youtube.com/embed/nhPaWIeULKk?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

Example

And the end result should looks something like this.

Important Notes

iFrame Version of Embed Code Required

This code works with the modern iframe version of the embed code. If your pages contain legacy (i.e. old) YouTube embed code that does not use iframes, this may not work for you. If that is the case, you may need to get the newer version of the embed code.

The original author states that this code will also work with Vimeo, but we have not confirmed that yet.

WYSIWYG Editors Sometimes Mess Up the Code

If you are using a Content Management System (CMS) or a WYSISYG Editor for entering your content on a page, sometimes the WYSIWYG Editor decides it wants to rewrite your code. This can break the code so it doesn't work as intended.

You may need to add the code in such a way that it does not get rewritten, which can vary from CMS to CMS.

Assumed Knowledge*

When writing this article, to keep the article short and concise, we assumed the following knowledge.

  • You understand enough basic HTML and CSS to understand the terminology and make minor changes.
  • You understand the concepts of responsive websites, and your website is already responsive.
  • You know how and where to add the CSS code.
  • You know how to get the YouTube or Vimeo embed code.
  • You are adding the code it such a way that a WYSIWYG editor is not modifying it.

*This is a note mostly to ourselves, as recommendations for future articles.

About the Author

WisTex's picture
Scott M. Stolz

Recommended Content