HTML5 video: maintaining aspect ratio when resizing

Question

I have a video element set to 100% width in a div container. This div has a maximum width of 800 pixels and a minimum width of 400 pixels. When resizing the browser, I need the video element to resize while maintaining the original aspect ratio. Currently, it resizes in width, but retains its original height by adding top and bottom mailbox panels to compensate for this.

Is it possible to dynamically resize a video element without using Javascript?

Answer 1

According to the window model, in the section on replaced elements , this should work as you expect: since the video has a height of auto and a set of width , and it has an intrinstic relation (as the video does), then the used height value should be calculated for based on this data. Make sure you don't specify height anywhere: CSS worked for me:

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

Try explicitly adding height: auto to the video - perhaps with !important to see if it will be installed elsewhere.