title: Fitting HTML5 video to parent element size
body: <p>I've got a &lt;video> element inside a &lt;div> that gets automatically resized when other elements on the page are dynamically resized / added / deleted.</p>
  
  <p>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 &amp; 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.</p>
  
  <p>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?</p>