css - HTML5 视频标签的宽度和高度

Question

所有，我的网站上有一些视频正在播放，我希望播放 width: 100%; height: 600px;但到目前为止，我所做的一切都没有奏效。

当我设置 height: 600px;视频的宽度是成比例的。我基本上是想实现和background-size: cover一样的效果，高度是600px。我正在使用内联 CSS，那部分可以更改，但我更关心如何实现视频的自定义高度和宽度，如果可能的话。谢谢。

非常感谢任何帮助。这是我的 <video> 代码

<video loop="loop" poster="img/waves1.jpg" style="width: 100%; height: 600px;" autoplay="autoplay">
            <source src="video/sunset.webm" type="video/webm">
            <source src="video/sunset.mp4" type="video/mp4">
</video>

Answer 1

实现此目的的一种方法是将视频包装在一个 div 中，并为其指定 600px 和 overflow: hidden 的高度。

例如:

<div style="width: 100%; height: 600px; overflow: hidden;">
    <video loop="loop" poster="img/waves1.jpg" style="width: 100%;" autoplay="autoplay">
            <source src="video/sunset.webm" type="video/webm">
            <source src="video/sunset.mp4" type="video/mp4">
    </video>
</div>

请注意，如果视频的比例高度大于 600 像素，则视频可能会在底部被截断，并且您将窗口拉伸(stretch)得越多，视频被截断的越多。

这是一个jsFiddle使用此代码:

<div style="width: 100%; height:200px; overflow: hidden;">
    <video loop="loop" style="width: 100%;" autoplay="autoplay">
        <source src="http://opcdn.battle.net/static/hearthstone/videos/home-header-bg.webm" type="video/webm"/>
    </video>
</div>