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

时间:2014-08-08 07:55:23

标签: html video

我正在尝试创建一个类似于此示例的完整浏览器宽度视频:

http://www.zendesk.com

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

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

我的问题是当broswer全宽时视频的高度。视频太高,无法填满整个屏幕。

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

是否可以将视频放在容器中,并为其提供一个屏蔽部分视频高度的高度。我不介意切掉一些视频。

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

是的,这是可能的。

查看Vide jQuery插件。从我个人的经验来看,它最容易玩,而且操作简单。

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

你最好使用身高:自动;宽度:xxPX;与您的容器/包装CSS。

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