Responsive iframe

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

by lakshmipathi

HTML

<div class="wrapper">
    <div class="h_iframe">
     <iframe src="http://www.webminal.org/terminal/proxy/index/" style="border:0; width:100%; height:350px;"></iframe>
    </div>
</div>

CSS

html,body        {height:100%;}
.wrapper         {width:80%;height:100%;margin:0 auto;background:#CCC}
.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%;}