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

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;
}

Answer 3

Actually just setting the .video wrapper isn't going to keep in it's container.
you're going to have to set a min-width for the body, html selectors. Use a fluid body width is what's causing to escape it's container.
so the new css would look like
body,html {
height: 100%;
min-width: 1024px;
}
#videos {
position: relative;
height: 30%;
background-color: rgba(0,0,0,0.8);
}
.video_wrapper {
height: 100%;
display: inline-block;
}
.video {
height: 100%;
width: auto;
}