Responsive iframe

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

HTML

<div class="wrapper">
    <div class="h_iframe">
        <iframe height="400" width="2" src="http://www.youtube.com/embed/WsFWhL4Y84Y" frameborder="0" allowfullscreen></iframe>
    </div>
    <p>Please scale the "result" window to notice the effect.</p>
</div>

CSS

html,body        {height:100%;}
.wrapper         {width:80%; max-width: 600px; height:100%; margin:0 auto; background:#CCC}
.h_iframe        {position:relative; padding-top: 56%;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}