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

Question

如标题所述，如果我将 <video> 包装在 <div> 容器中（以进一步添加覆盖），则设置为 relative; inline-block; height:100%; 而 <video> 的大小是 height:100%; width:auto 在初始页面呈现时一切都很好，但是一旦您调整页面大小视频 shrink/grow，但容器的宽度保持不变。

这是给你的代码笔：http://codepen.io/MaxYari/pen/PqeOQY
只需尝试更改 window 的高度，看看我的意思。

换句话说 - 我想制作一个容器来包裹 <video> 标签，它在本质上保持其纵横比。
这个 div-video 结构必须适合更大的 container-list.
适合较大的一侧，具体取决于 container-list 方向。即 height: 100% 表示水平。
单独CSS当然可以针对不同的方向做，所以我只想解决一个案例，假设它会解决两个。

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

Answer 1

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

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

像这样添加百分比宽度：

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

Answer 2

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

您将必须为正文 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

在 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 中工作的唯一方法是在 window 调整大小时 force a repaint：

Working Example

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

Chrome 好像是流畅的视频有问题，貌似跟 object-fit property 有关系，幸好你可以用上面的方法解决。

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

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

html

css

html5-video

responsive-design