Simple technique to make fluid iframes without use of javascript or plugins. Using this technique we have more gains in performance and simplicity.

This is a technique of positioning a element inside of another using "position: absolute;" for the "child" and "position: relative;" for the "wrap".

(ps: Depending on your case I suggest you set height for images).

HTML

<div class="fluidMedia">
    <iframe src="" frameborder="0"> </iframe>
</div>

CSS

.fluidMedia {
    position: relative;
    padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.fluidMedia iframe {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
}

Example here.

Browser support

• IE 7+
• Firefox 3.6+
• Chrome 6+
• Safari 5+

You can know more about it on A List Apart great article.

Cheers!