All Articles

Fluid iframe without use of javascript.

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!

Published 12 Mar 2013

Software Engineer focused in Javascript applications
Michael Lancaster on Twitter