Responsive iframe

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

by Johan Pantzare

HTML

<div class="wrapper">
    <div class="h_iframe">
        <!-- a transparent image is preferable -->
        <img class="ratio" src="http://placehold.it/16x9"/>
        <iframe src="http://volvocetraining.com/anna/DD90B%20Launch%20Introduction_10/index.html " frameborder="0" allowfullscreen></iframe>

CSS

html,body        {height:100%;}

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