Responsive Youtube Embed

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.

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

<div class="video-container"><iframe src="" frameborder="0" width="560" height="315"></iframe>