[htmuoljh]
You can build great websites. We can help! Join today and get access to 2849 training videos: Start a free trial!

Responsive YouTube and Vimeo Videos

Responsive YouTube and Vimeo VideosYouTube, 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.

#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

#2. Use the Embed Code

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


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

#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>

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.


About the author
Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in our support forum.

You can build great websites. We can help! Join today and get access to 2849 training videos: Start a free trial!

Arvixe

Welcome to training with a smile :) Created by friendly people all across North, Central, South America and UK.