Fluid iframe without use of javascript.

发布于 2016-04-06  128 次阅读

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


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


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