css - 如何使视频响应所有屏幕尺寸？

Question

首先，视频有点缩放，我希望它适合整个屏幕。除此之外，我不知道如何让视频在所有屏幕尺寸上都能响应。

HTML

<div class="spread-video">
  <video src="https://b922bde52f23a8481830-83cb7d8d544f653b52d1a1621f05ea9d.ssl.cf3.rackcdn.com/video/landingpage.mp4" autoplay="" loop="">
  </video>
</div>

CSS

.spread-video {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

有人知道如何实现吗？提前致谢!

Answer 1

定位 <video>而不是父 div，请参见 fiddle :https://jsfiddle.net/m1pz6zcu/4/

.spread-video > video {
  width: 100%;
}

由于视频的纵横比与视口(viewport)的纵横比不同，解决该问题的方法是使视频宽度大于视口(viewport)宽度，将其居中并 overflow hidden 。参见 fiddle :https://jsfiddle.net/m1pz6zcu/6/

.spread-video > video {
  width: 200%;
  margin-left: -50%;
}
.spread-video{
  overflow: hidden;
}