Container's width not wrapping around width:auto <video>

Question

As the title states, if I wrap <video>'s in a <div> container (to further add an overlay), which is set to relative; inline-block; height:100%; while <video>'s size is height:100%; width:auto 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.

Here is a codepen for you: http://codepen.io/MaxYari/pen/PqeOQY
Just try to change height of the window and see what I mean.

In another words - I want to make a container that will wrap around the <video> tag, which preserves its aspect ratio by its nature.
This div-video construct must fit into a bigger container-list.
Fit by the bigger side, depending on container-list orientation. i.e height: 100% for horizontal.
Separate CSS surely can be made for different orientations, therefore I just want to solve one case, presuming that it will solve both.

Edit: Updated Pen and added a border to video wrapper to illustrate it's nonwrappiness better.

Answer 1

In Firefox it looks like you could just change display: inline-block; to display: inline-flex; like so:

Example - Does NOT work in Google Chrome; For multibrowser solution with some JavaScript look down below

body,
html {
  height: 100%;
}
#videos {
  position: relative;
  height: 30%;
  background-color: rgba(0, 0, 0, 0.8);
}
.video_wrapper {
  height: 100%;
  display: inline-flex; /* see change here */
}
.video {
  height: 100%;
  width: auto;
}

<div id="videos">
  <div class="video_wrapper">
    <video class="video" autoplay src="http://techslides.com/demos/sample-videos/small.mp4"></video>
  </div>
  <div class="video_wrapper">
    <video class="video" autoplay src="http://techslides.com/demos/sample-videos/small.mp4"></video>
  </div>
</div>

MDN Documentation

Can I use compatibility table

---

It looks like the only way to get it to work in Chrome is to force a repaint when the window is resized:

Working Example

$(window).resize(function () {
    $('.video_wrapper').hide().show(0);
});

Chrome seems to have issues with fluid video, looks like it has something to do with the object-fit property, fortunately you can work around it with the method above.

Answer 2

You have not specified any width in the video wrapper

.video_wrapper {
  height: 100%;
  display: inline-block;
}

Add a percentage width like this:

.video_wrapper {
  width: 100%;
  height: 100%;
  display: inline-block;
}