title: Container's width not wrapping around width:auto <video>
body: <p>As the title states, if I wrap <code>&lt;video&gt;</code>'s in a <code>&lt;div&gt;</code> container (to further add an overlay), which is set to <code>relative; inline-block; height:100%;</code> while <code>&lt;video&gt;</code>'s size is <code>height:100%; width:auto</code> It's all nice on initial page rendering, but as soon as you resize the page the videos shrink/grow, but the container's width remains the same.</p>
  
  <p>Here is a codepen for you: <a href="http://codepen.io/MaxYari/pen/PqeOQY" rel="noreferrer">http://codepen.io/MaxYari/pen/PqeOQY</a><br>
  Just try to change height of the window and see what I mean.</p>
  
  <p>In another words - I want to make a container that will wrap around the <code>&lt;video&gt;</code> tag, which preserves its aspect ratio by its nature.<br>
  This div-video construct must  fit into a bigger container-list.<br>
  Fit by the bigger side, depending on <code>container-list</code> orientation. i.e <code>height: 100%</code> for horizontal.<br>
  Separate <code>CSS</code> surely can be made for different orientations, therefore I just want to solve one case, presuming that it will solve both.</p>
  
  <p><strong>Edit:</strong> Updated Pen and added a border to video wrapper to illustrate it's nonwrappiness better.</p>