Fitting HTML5 video to parent element size

Question

I've got a <video> element inside a <div> that gets automatically resized when other elements on the page are dynamically resized / added / deleted.

I would like the video element to also automatically resize so that it always remains contained within its background div; this sort-of-works if I set the video element's CSS height & width to 100%, so it's always the same size as its container. However, if the containing div's dimensions go below the video image's inherent videoWidth or videoHeight, then it starts to behave as though the CSS height/width properties refer to percentages of the video image's inherent dimensions, not the container div! E.g., if the CSS height is 100%, it scales normally except that it has a minimum size of the video's inherent height; if the CSS height is 50%, it scales normally but with a minimum size of 50% of the video's inherent height.

I can fix this, sort of, by using JavaScript to periodically reset the video element's height in pixels to be the computed height of the container, but this is really slow and choppy. Is there any way to fix this in CSS so that the video element will size properly?

Answer 1

I am well aware this is an older question, but I have been struggling with accomplishing a layout with CSS where a video is automatically sized to fit some box, typically within parent element.

Just using width and height with static positioning only works in certain configuration of parent-child topologies, and also depends a lot on how the topology is styled. Even if you get some element to properly calculate its boundaries, once you put a playing video element inside it, it will expand the parents allowed box, even though that is the least sensible behavior you'd expect.

Throw in some fieldset elements, and you're in the rabbit hole of CSS and browser peculiarities.

What I have found out is that it was easiest to just take the video element out of its positioning context, using position: absolute. It doesn't mean that it won't visually well-behave -- using width: 100% and height: 100% effectively makes it properly constrain itself as it otherwise should (but wouldn't). You would then need to add position: relative to appropriate ancestor element of the video element, otherwise the video will be absolutely positioned in relation to document root, which is most likely not what you'd want.

Omitting left and right works because absolute positioning does not reset the position, just switches the calculation method. You could alternatively set both properties to zero, you'd get your video aligned to the offset parent top-left corner then. max-width and max-height are unnecessary -- I just have seen these being thrown in in a lot of cases where people struggle with constraining their video elements -- don't bother.

You can specify background color for either the video element or its offset parent. That way you will get the letter-boxing effect -- say, black bars on the sides of the video.

Answer 2

As your video is inside a div, this can be solved by setting both width and height of the video to 100%. This makes the video occupy 100% of the div element.

Markup example:

<div id="video_container">
   <video></video>
</div>

Stylesheet:

#video_container video {
    width: 100%;
    height: 100%;
}