Escala iFrame css ancho 100% como una imagen

Question

Jun 20, 2012, 04:52 PM

Escala iFrame css ancho 100% como una imagen

Quiero escalar un iFrame a través de CSS parawidth: 100%, y la altura debe escalar proporcionalmente al ancho.

Con un<img> etiqueta esto funciona bien.

Tanto la imagen como el iFrame tienen ancho y alto definidos en el html.

Aquí algunos ejemplos:

<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>

Esto funciona muy bien en imágenes, pero me gustaría el mismo comportamiento para 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>

El iFrame se procesa al 100% de ancho, pero no escala su altura proporcional como lo hace la imagen.