容器的宽度不环绕 width:auto <video>

Question

如标题所述，如果我将<video> 包装在<div> 容器中（以进一步添加覆盖），该容器设置为relative; inline-block; height:100%; 而<video> 的大小为height:100%; width:auto 这就是全部初始页面渲染不错，但一旦您调整页面大小，视频就会缩小/增长，但容器的宽度保持不变。

这里有一个代码笔：http://codepen.io/MaxYari/pen/PqeOQY
试着改变窗口的高度，看看我的意思。

换句话说 - 我想制作一个包裹<video>标签的容器，它本质上保持其纵横比。
这个 div-video 结构必须适合更大的容器列表。
根据container-list 的方向，适合较大的一侧。即height: 100% 水平。
单独的CSS肯定可以针对不同的方向进行，因此我只想解决一种情况，假设它会解决两种情况。

编辑：更新了 Pen 并为视频包装器添加了一个边框，以更好地说明它的非包装性。

Answer 1

在 Firefox 中，您似乎可以像这样将 display: inline-block; 更改为 display: inline-flex;：

Example - 不适用于 Google Chrome；对于带有一些 JavaScript 的多浏览器解决方案，请往下看

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

---

看起来让它在 Chrome 中工作的唯一方法是在调整窗口大小时force a repaint：

Working Example

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

Chrome 似乎有流畅视频的问题，看起来和object-fit property 有关系，幸运的是你可以用上面的方法解决它。

Answer 2

实际上只是设置 .video 包装器不会保留在它的容器中。

你将不得不为 body 和 html 选择器设置一个最小宽度。使用流体宽度是导致其容器逃逸的原因。

所以新的 CSS 看起来像

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

Answer 3

您没有在视频包装器中指定任何宽度

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

像这样添加百分比宽度：

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