Scale videos in a responsive layout with CSS

Responsive video?

So you need a video to fit in your responsive layout but don't know how to get it scaling in proportion? It's easy, using a little CSS and an intrinsic ratio. This simple technique allows videos embedded in your responsive website to scale up and down with the layout, while maintaining the correct proportions, and all without the need for JavaScript.

Using the width and height of your video, this tool calculates the CSS padding value required, and there's example code below to help you get it working. If you're still stuck, read this article on alistapart.

Example code

HTML

<div class="videocontainer">
    <video></video>
</div>

CSS

.videocontainer {
    position: relative;
    /*Intrinsic ratio value below*/
    padding-bottom: ENTER VIDEO SIZE ABOVE;
    height: 0;
}
.videocontainer video {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}