Flexible Embedded Media

by Can

HTML

<figure>
    <iframe src="http://www.youtube.com/embed/MTwp8aiq-hM" frameborder="0" allowfullscreen>
    </iframe>
</figure>



<!-- http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ -->
<!-- http://learn.shayhowe.com/advanced-html-css/responsive-web-design -->

CSS

figure { 
    width: 100%;
    height: 0;
	position: relative;
    padding-top: 56.25%; /* 16:9 */
}

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