I am well aware that this is an older question, but I was struggling with the layout with CSS, where the video automatically adjusts to some field, usually inside the parent element.
Just using width and height with static positioning only works in a specific configuration of parent-child topologies, and also depends heavily on the style of the topology. Even if you get some element for the correct calculation of its boundaries, as soon as you put a reproducing video element in it, it will expand the field allowed by the parents, although this is the least reasonable behavior that you expect.
Throw a few fieldset elements and you're in the rabbit hole of CSS and browser features.
What I found out is that it is easiest to remove a video element from a positioning context using position: absolute . This does not mean that it will not behave visually well - using width: 100% and height: 100% effectively makes it properly limit itself, as otherwise (but will not). Then you need to add position: relative to the corresponding element of the ancestor of the video element, otherwise the video will be absolutely positioned relative to the document root, which, most likely, will not be what you want.
Omitting left and right works because absolute positioning does not reset the position, it simply switches the calculation method. You can alternatively set both properties to zero, then you will get your video aligned to the upper left corner of the offset. max-width and max-height not needed - I just saw how they are thrown in many cases when people struggle with the restriction of their video elements - do not worry.
You can specify the background color for the video element or its offset parent. Thus, you get the effect of boxing letters - say, black bars on the sides of the video.