bekapod · December 15, 2015 07:29
diff --git a/style.css b/style.css
 >> Wrapping the iframe in another element will give us the control we need to add proper responsive functionality to the video.

 .video {
 position: relative;
 padding-bottom: 56.25%;
 height: 0;
 overflow: hidden;
 }
 .video iframe,
 .video object,
 .video embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 }
 >> Setting the .video wrapper’s padding-bottom: 56.25%; is the magic in this method. Using padding means the percentage used will be based on the parent’s width; ‘56.25%’ will create a 16:9 aspect ratio. Do the maths yourself, if you want. 9 / 16 = 0.5625. 0.5625 * 100 = 56.25 (this is our per cent).
	>> Wrapping the iframe in another element will give us the control we need to add proper responsive functionality to the video.

	.video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	}
	.video iframe,
	.video object,
	.video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
	>> Setting the .video wrapper’s padding-bottom: 56.25%; is the magic in this method. Using padding means the percentage used will be based on the parent’s width; ‘56.25%’ will create a 16:9 aspect ratio. Do the maths yourself, if you want. 9 / 16 = 0.5625. 0.5625 * 100 = 56.25 (this is our per cent).