HTML5 Video: Retain aspect ratio when resizing

8
votes

I have a video element set to 100% width in a container div. That div has a max-width of 800px and min-width of 400px. When resizing the browser I need the video element to resize while retaining its original aspect ratio. Currently it resizes in width but remains its original height, adding letterbox bars above and below to make up for it.

Is it possible to resize the video element dynamically like this without resorting to Javascript?

1
cssvideohtml
What did you set the height to? is it a static measurement? – Eran Galperin

1 Answers

9
votes

According to the box model, in the section on replaced elements, this should work as you expect: Since the video has a height of auto and a set width, and it has an intrinstic ratio (as videos do), then the used value of height should be computed based on those. Make sure you are not specifying the height anywhere — the following CSS worked for me:

video {
    width: 100%;
}
div {
    max-width: 800px;
    min-width: 400px;
}

Try explicitly adding height: auto to the video — maybe with !important to see if it’s getting set somewhere else.