Rendre youtube -ou n'importe quel iframe- responsive

responsive-iframe

Rendre youtube (ou n'importe quel iframe responsive)

HTML :

    <div class="wrapper">
        <div class="h_iframe">
            <!-- a transparent image is preferable -->
            <img class="ratio" src="http://placehold.it/16x9"/>
            <iframe src="http://www.youtube.com/embed/WsFWhL4Y84Y" frameborder="0" allowfullscreen></iframe>
         </div>
    </div>

CSS :

    .wrapper         {width:100%;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%;}