Resizeable (proportionately!) embedded videos

Getting embedded videos to work responsively (and resize proportionately) has been a hassle, until I found this lil tidbit. Wrap your video embed code in a div with class “video-container”, and using the following CSS, the video will fill its container, and maintain it’s proportions as you resize it!

In the .video-container style, set the padding-bottom to the percentage you get when you divide your target height by your target width. So for 16:9 ratio, use 56.25%, since 9 / 16 = 0.5625.

I learned this technique from the example here: https://github.com/chriscoyier/Fluid-Width-Video

See this in action in this JSFiddle (http://jsfiddle.net/paleosun/caww0bke/).

Markup

1
2
3
4
5
6
7
8

<div class="video-container">
	<iframe 
		width="16" 
		height="9" 
		src="//www.youtube.com/embed/mjj9d33U9cI?rel=0&showinfo=0&vq=hd720&modestbranding=1&iv_load_policy=3&controls=2" 
		frameborder="0" 
		allowfullscreen></iframe>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.video-container{
	position: relative;
	padding-bottom: 56.25%;  /* for 16:9 ratio, 9 / 16 = 0.5625 */
	padding-top: 25px;
	height: 0;
	overflow: visible;
	margin: 0px 10px 20px 10px;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}