5

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?

Logan R. Kearsley
  • 682
  • 1
  • 5
  • 19
  • It seems that container's aspect ratio doesn't match video content intrinsic aspect ratio (When rendering, video content intrinsic aspect ratio is always preserved) – ExpExc Nov 12 '11 at 02:19
  • 1
    The video image is supposed to be letterboxed inside the bounds of the video element in order to maintain it's aspect ratio; the video element itself is supposed to be sizeable however you like, and that usually works. I did finally get it to work, but the reason escapes me; see the fiddle at http://jsfiddle.net/gliese1337/Djbvj/20/ . If you set the video position to "absolute", it works. If you delete that line from the CSS, it behaves inexplicably. – Logan R. Kearsley Nov 12 '11 at 18:45
  • 1
    @jammypeach Uh, how? I have been staring of both of these questions, and the answers given on the poster question, for about 10 minutes now, and I honestly cannot comprehend how you could think they are the same. This problem has nothing to do with video poster images, or matching anything to the size of a video. It's a problem with the video, not the video image, element scaling weirdly. – Logan R. Kearsley Nov 09 '15 at 20:20
  • @LoganR.Kearsley for my part, I've had a dense moment and misflagged this - my apologies. I've nominated to re-open. Not sure why everyone else agreed! I still think it's a dupe but you're right, it's not a dupe of the one I've selected. – totallyNotLizards Nov 10 '15 at 08:46

2 Answers2

4

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.

Armen Michaeli
  • 8,625
  • 8
  • 58
  • 95
1

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%;
}
Armen Michaeli
  • 8,625
  • 8
  • 58
  • 95
Akash Pinnaka
  • 465
  • 4
  • 23
  • 1
    That's exactly what I did first. It is the obvious thing that should work. But it *doesn't* (or at least, didn't 3 years ago; this might not be the case anymore, several browser versions later). As I said in the question: "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!" That's the problem that I needed to solve. – Logan R. Kearsley Nov 14 '15 at 21:52
  • I think the bottom line is that the browser always preserves the video's aspect ratio. – mtyson Feb 22 '17 at 23:48
  • Whether or not the user agent preserves aspect ratio has little to do with the problem -- even preserving the aspect ratio, it is mathematically and otherwise trivial to calculate maximum height or width, depending on which constraint is more applicable, and calculate the other dimension so that aspect ratio is correct. This is how you watch letterboxed movies on 4:3 display, or vice versa with 4:3 content on modern widescreen TVs, for example. You get black bars. With `video` this would otherwise be achieveable with `background-color` property. – Armen Michaeli Jul 19 '17 at 08:24