css - HTML5 视频响应式垂直封面

Question

有没有办法让 HTML5 视频（和海报属性）像居中的背景封面一样？

我创建了一个可以在宽度范围内玩的虚拟笔：

http://codepen.io/SEFarstad/pen/vujqE

布局基于两个 50% 宽度的部分，其中左侧将包含固定视频，右侧将包含绝对定位的内容。

主要问题是我的设计需要垂直分割，使水平视频成为问题。有没有办法让这些水平视频在这样的垂直布局中全高？- 与使用背景尺寸相同的方式：封面；

我知道你可以使用背景视频等，但我需要它来控制、海报等，以满足我对这个项目的一些交互性需求。

Answer 1

我知道这是一个老问题，你可能已经转向其他事情了，但我想回答一下，以防其他人通过谷歌偶然发现这个问题。您正在寻找的是object-fit一种将这种行为添加到视频和图像的方法。这里有一些关于它的信息，但基本上你只需要这样写：

video {
  ... // other stuff here
  object-fit: cover;
}

可悲的是，您还不能在每个浏览器上都使用它。但是，您可以查看一个 polyfill。