Scale iFrame css width 100% like an image

css, iframe, responsive-design

Solution

Big difference between an image and an iframe is the fact that an image keeps its aspect-ratio. You could combine an image and an iframe with will result in a responsive iframe. Hope this answerers your question.

Check this link for example : http://jsfiddle.net/Masau/7WRHM/

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>
    <p>Please scale the "result" window to notice the effect.</p>
</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%;}

note: This only works with a fixed aspect-ratio.

Problem

I want to scale an iFrame through CSS to `width: 100%`, and the height should scale proportionally to the width. With an `<img>` tag this works fine. Both the image and the iFrame have defined width and height in the html. Here some examples: ``` <html> <style> #a{ width: 500px; } img{ width: 100%; height: auto } </style> <body> <div id="a"> <img src="http://lorempixel.com/200/150/" width="200" height="150" /> </div> </body> ``` This works great on images, but I would like the same behaviour for iFrames: ``` <html> <style> #a{ width: 900px; background: grey;} iframe{ width: 100%; height: auto } </style> <body> <div id="a"> <iframe width="560" height="315" src="http://www.youtube.com/embed/RksyMaJiD8Y" frameborder="0" allowfullscreen></iframe> </div> </body> ``` The iFrame renders 100% wide but does not scale it's height proportional like the image does.

Original source