Responsive iframe

Small snippet for a responsive iframe solution with fixed aspect-ratio.

by Roberto Apasajja

HTML

aaaa
<div class="h_iframe">
        <img class="ratio" src="http://placehold.it/16x9"/>
        <iframe src="http://www.youtube.com/embed/WsFWhL4Y84Y"></iframe>
    </div>
zzzzz

CSS

.h_iframe        {position:relative;}
.h_iframe .ratio {width:100%;height:auto;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%; border:0}