Resize Videos Proportionally with Intrinsic Ratios

Ever wanted to resize videos while keeping the same aspect ratio in your responsive designs? Check out this easy to implement, CSS only technique that allows videos to be resized on the fly!

I recently came across a great CSS technique to scale videos like you would images. As the width of the video decreases, the height of the video changes accordingly to keep to same aspect ratio. Currently, this is difficult to do when just setting the width to 100% due to the height remaining constant. Using the intrinsic ratio technique allows the browser to determine video dimensions based on the width of the parent container.

With intrinsic dimensions, a new width triggers a new height calculation, allowing videos to resize and giving them the ability to scale the same way images do. See example one.

CSS Intrinsic Ratio Technique

To accomplish this little piece of CSS magic, we’ll create a box with the proper aspect ratio (4:3, 16:9, etc.), then make the video inside that box stretch to fit the dimensions of the box. Simple stuff!

Where the magic happens…

padding is the secret to the intrinsic ratio technique. To accomplish, we’ll set the bottom padding of the parent container to a percentage based on it’s width. To create this “magic wrapper”—a container that proportionally resizes itself, check out the code below:

How it Works

First, let’s break down the .video-container rule:

position: relative
Declaring position: relative makes all child elements position themself in relation to this container.

padding-bottom: 20%
This is where the real magic happens. It gives the container box a specific format. Using 20% for padding makes the height of the box equal to 20% of its width. You’ll have to adjust this accordingly to match your videos aspect ratio.

[message type=”info”]Why use padding-bottom instead of padding-top? Simple answer, IE. IE5 removes the “space” created via padding-top—yeah, IE is a little slow.[/message]

height: 0
This gives the element “layout” so that slow IE5 and IE6 will render the dimension of the inner container properly.

[message type=”info”]Again, since IE is a little slow, you should not use width: 100% as a layout trigger. This will cause the box to expand to fill it’s container rather than respect the width we set for the parent container.[/message]

Now, let’s look at the .video rule:

position: absolute
This frees the video from the height boundary of its parent and allows the it to be positioned over the “padding area”.

top: 0
Positions the video at the top of it’s parent container.

left: 0
Positions the video on the left side of it’s parent container.

width: 100%
This makes the video stretch to fill the height of its parent container.

height: 100%
This makes the video stretch to fill the height of its parent container.

That’s it! Now you’ll have a video that keeps it’s aspect ratio our responsive designs.

Learn more about the CSS intrinsic ratio technique:

• Creating Intrinsic Ratios for Video by Thierry Koblentz
• Rundown of Handling Flexible Media by Chris Coyier
• Fluid Width Video by CSS-Tricks