HTML5视频,高度固定,但比例宽度为100%

Question

我想要做的是有一个HTML5视频比例100%的页面宽度,但保持650px的固定高度.

以下代码进行了扩展以保持纵横比,这不是我需要的:

<header>
    <video width="100%" autoplay="autoplay">
        <source src="video.webm" type="video/webm; codecs=vp8,vorbis">
    </video>
</header>

我也试过了,max-height="650px"但这只是视频的中心,两边都留有空白.

Answer 1

paypal所做的是根据视口扩展视频.但他们不会移动,这是一个问题.

因此,如果您想将视频从小型设备扩展到大型设备,您可以使用基本标记放置视频:

<video width="100%" height="auto">...

这将扩大您的视频.问题是当你去一个小视口时.视频将缩小但可能太小,因此您可以定义最小高度并使用CSS变换来扩展视频方面:

video{
transform: scale(1.5);
-webkit-transform: scale(1.5);
}

使用媒体查询,您可以定义断点并缩放这些屏幕的视频.

此外,通过一些JavaScript,您还可以为视频定义焦点(如果视频的某些区域更重要).

请查看此链接以获取更多详细信息: