Skaluj szerokość css iFrame w 100% jak obraz

Question

Jun 20, 2012, 04:52 PM

Skaluj szerokość css iFrame w 100% jak obraz

Chcę skalować iFrame przez CSS dowidth: 100%, a wysokość powinna być skalowana proporcjonalnie do szerokości.

Z<img> tag działa dobrze.

Zarówno obraz, jak i iFrame mają zdefiniowaną szerokość i wysokość w html.

Oto kilka przykładów:

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

Działa to doskonale na obrazach, ale chciałbym tego samego zachowania dla iFrame:

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

Ramka iFrame renderuje w 100% szerokości, ale nie skaluje jej wysokości proporcjonalnie do obrazu.