Responsive embeds

by phloe

HTML

<div class="object-wrap ratio-16-9"><iframe width="640" height="360" src="http://www.youtube.com/embed/7pL5vzIMAhs" frameborder="0" allowfullscreen></iframe></div>

CSS

.object-wrap { 
    position: relative;
}
.object-wrap:after {
    padding-bottom: 56.25%;
    position: relative;
    width: 100%;
    content: " ";
    display: block;
    z-index: 1;
}
.object-wrap > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}