HTML5背景视频大小？

Question

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

Answer 1

我认为你不想打破宽高比？所以我想你想要保持视频100％宽，但是＃＆＃34; crop＆＃34;它使视频可见的区域高度为600px？

您可以将视频放入div：

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

然后将包装器div的overflow-y属性设置为＆＃34; hidden＆＃34;：

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

要定位视频（即将其置于中心位置），请使用＆＃34; top＆＃34;和＆＃34;左＆＃34;属性以及＆＃34;转换＆＃34; -attributes（translateY，translateX）。