At the time of writing, the video embed code that you get from YouTube and Vimeo are not responsive, that is, they don’t re-size automatically based on the size of the screen. If you have a responsive website, then you must make sure that the videos on your site are also responsive, otherwise they will break the responsive design of your site by stretching outside the responsive container.
To make the video embeds from YouTube and Vimeo responsive, first put the embed code in a wrapper div and specify a fixed padding to this div. Then specify 100% height and width to the inner embed code, which is either an iframe or object element. Here’s the exact code and procedure,
1. First wrap the YouTube or Vimeo embed code in a wrapper div,
<iframe src="http://player.vimeo.com/video/1234567890" width="800" height="450" frameborder="0"></iframe>
</div>
2. Then add this CSS code to your style file,
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%;
}
Now the Vimeo or YouTube video on your website should be responsive.
Note that the above code to make a YouTube or Vimeo video responsive will also work fine for any other video embed code that is embedded as an iframe, object or embed.