To make the youtube video iframe responsive, just force a wrapping container to the desired aspect ratio and tell the iframe to fill the container.
css
.video-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 75%; /* default youtube aspect ratio */
}
.video-wrapper iframe,
.video-wrapper object,
.video-wrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
scss
With some help from the css aspect ratio snippet this is very easy in sass.
.video-wrapper {
@include box-aspect-ratio(420/315); // Just use the pixel dimensions of the "original" size
iframe,
object,
embed {
@include fill-parent();
}
}