完整的浏览器视频，视频比例

Question

我正在尝试创建一个全浏览器宽度的视频，类似于下面的例子：

http://www.zendesk.com

创建全宽响应视频非常简单：

http://www.ttmt.org.uk/video/

我的问题是当浏览器是全宽的时候视频的高度。视频太高了，占满了整个屏幕。

如果视频是不同的比例会更好，但我认为这不会不起作用。

是否可以将视频放在容器中，并给出一个高度，该高度将掩盖视频的部分高度。我不介意剪掉一些视频。

Answer 1

zendesk正在使用CSS Flex Box布局。更多信息请访问：http://www.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/

我打赌你的答案就在这里。根据我在源代码中看到的内容，我猜测zendesk正在托管一个容器中的视频，该容器位于两个flex框之间。很酷的东西。

Answer 2

是的，这是可能的。

查看Vide jQuery插件。从我个人的经验来看，它是最容易玩的，最小的麻烦。

因为插件是响应式的，所以它会将视频限制到容器或包装器的高度/宽度属性。

对于容器/包装器CSS，最好使用height:auto；width:xxPX；。

http://vodkabears.github.io/vide/