Responsive video container for embed/object/iframe videos. This uses the bourbon mixins position & size.
.video-wrapper {
height: 0;
overflow: hidden;
padding-bottom: 56.25%; // 16:9
//padding-bottom: 75%; // 4:3
position: relative;
embed,
object,
iframe {
@include position(absolute, 0 null null 0);
@include size(100%);
}
}Example Usage:
<div class="video-wrapper">
<iframe src="https://player.vimeo.com/video/87110435?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>