Add Responsive YouTube and Vimeo Videos to Any Website

YouTube, Vimeo and other video hosts make it easy to embed their players in your own website.

However, Youtube, Vimeo and others don't provide responsive videos by default.

In this short tutorial, we'll show you how to make YouTube, Vimeo and other videos responsive in your website, using just a few lines of CSS.

 

Step #1. Get the YouTube Embed Code

  • Go to Youtube.
  • Find the video you want to use on your website.
  • Click on Share >> Embed >> Right click and copy the HTML code.

responsivevideos 1

Step #2. Use the Embed Code

Paste this embed code in your website. It will look similar to this:

<div class="video-responsive">
    <iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>
</div>

 

Step #4. Add the CSS

Now add some CSS properties inside one of your stylesheet files:

.video-responsive{
 overflow:hidden;
 padding-bottom:56.25;
 position:relative;
 height:0;
}
.video-responsive iframe{

 left:0;  top:0; height:100;width:100;position:absolute;

}