Responsive iframe

Small snippet for a responsive iframe solution with fixed aspect-ratio.

by gianlucaguarini

HTML

<main>
  <div class="wrapper">
  <iframe src="http://www.youtube.com/embed/WsFWhL4Y84Y" frameborder="0" allowfullscreen></iframe>
</div>
</main>

CSS

.wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 (9 / 16 * 100) */
	padding-top: 25px;
	height: 0;
}
.wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

main {
  width: 80%;
  margin: 0 auto;
}