Responsive Video with CSS

Wrap an iframe or other video element in a div class="video" to apply the following CSS rules. And voila, you have responsive video.

.video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	margin-bottom: 2em; /*optional*/
}
.video iframe,
.video object,
.video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

The padding-bottom percentage is the height to width ratio based on a 16:9 video aspect ratio. 9÷16 = 0.5625

See CodePen example here.

See this article for a similar technique used for general div content.

3 Responses to “Responsive Video with CSS”

  1. I had implemented this code for my responsive videos a while back, but I never understood the reason for the 2em margin-bottom. Could you shed some light on that for me? As far as I can tell, using the code w/o the margin bottom works the same, and it doesn’t have that whitespace at the bottom of the container.
    Thanks!

    • Tim says:

      Hi Fillip,
      The margin-bottom does not have any effect on the scaling of the video container, it is simply some optional space between the video and whatever content is below it. Take it or leave it!
      Tim.

  2. Awesome! I thought that was the case. Thanks for the reply!