Embed Responsive YoutTube Videos w/ CSS
You will need to wrap the responsive youtube embed code with a <div> and specify a 50% to 60% padding bottom. Then specify the child elements (iframe, object embed) 100% width, 100% height, with absolute position. This will force the embed elements to expand fullwidth automatically. Awesome! Exactly what we need.
First you will need to add the following to your style sheet.
CSS
.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%;
}
Next, edit add some HTML around your embed code.
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%;
}
Next, edit add some HTML around your embed code.
HTML
<div class="video-container"><iframe src="http://www.youtube.com/embed/xxxxx" frameborder="0" width="560" height="315"></iframe>
</div>
<div class="video-container"><iframe src="http://www.youtube.com/embed/xxxxx" frameborder="0" width="560" height="315"></iframe>
</div>