CSS technique to scale media proportionally, even in responsive sites, no server-side code or JS needed

gistfile1.css

	/* scale video container proportionally to 16:9 */
	.video{
		width:100%;
		padding-bottom: 56.25%;
		position: relative;
		float: left;
		height: 0;
	}
	
	/* scale video iframe to 100% */
	.video > *{
		width:100% !important;
		height: 100% !important;
		position: absolute;
		left: 0;
	}
	
	/* clear the floated container */
	.video:after{
		clear:both;
		content:".";
		height:0;
		font-size:0;
		visibility:hidden;
		zoom: 1;
		}