Add Responsive YouTube and Vimeo Videos to Any Website

In This Tutorial you will learn how to 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, they don't provide responsive videos by default. So using just a few lines of CSS. we can make this happen.

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.

.

.

Step #2. Use the Embed Code

    <iframe width="420" height="315" src="http://www.youtube.com/embed/6xisazZX9bA" frameborder="0" allowfullscreen></iframe>

Step #3. Modify the Embed Code

Add a div tag around the embed code. Use the CSS class video-responsive so that your code now looks like this:

<div class="video-responsive">
    <iframe width="420" height="315" src="http://www.youtube.com/embed/6xisazZX9bA" 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;
}

Your videos now will be responsive. Try resizing your browser to see it in action.

This same process works for Vimeo videos and any other service that uses an iframe tag.