Escala iFrame css largura 100% como uma imagem

Question

Jun 20, 2012, 04:52 PM

Escala iFrame css largura 100% como uma imagem

Eu quero escalar um iFrame através de CSS parawidth: 100%e a altura deve ser dimensionada proporcionalmente à largura.

Com um<img> tag isso funciona bem.

Tanto a imagem quanto o iFrame definiram largura e altura no html.

Aqui alguns exemplos:

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

Isso funciona muito bem em imagens, mas eu gostaria do mesmo comportamento 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>

O iFrame renderiza 100% de largura, mas não dimensiona sua altura proporcionalmente como a imagem faz.

leaveComments