HTML5 背景视频大小？

Question

我想要一个宽度为 100%、高度为 600 像素的 HTML5 背景视频。我遇到的问题是，当我将其高度设为 600 时，它会将整个视频缩小，因此宽度不再是 100%。关于如何解决这个问题的任何想法？

Answer 1

我假设您不想破坏纵横比？所以我猜你想保持视频 100 % 宽，但“裁剪”它，使视频可见的区域高度为 600 像素？

您可以将视频放在一个 div 中：

<div class="wrapper"><video><source src="my-video.mp4"></video></div>

然后将wrapper div的overflow-y属性设置为“隐藏”：

.wrapper{width:100%;height:600px;overflow-y:hidden;}
video{width:100%;height:auto;position:absolute}

要定位视频（即居中），请使用“top”和“left”属性以及“transform”-attributes（translateY、translateX）。