css - 将视频填充到屏幕高度和宽度的整个高度和宽度

Question

问题:

• 尝试用视频填充整个屏幕的高度和宽度，但我不明白为什么视频没有填充我环绕它的整个容器。

• 我有一个视频容器 <div>包裹在 <video> 周围具有以下样式:

代码:

 videoContainer: {
       height: '100vh'
    },
    video: {
       objectFit: 'cover'
    }

Answer 1

这也可以解决您的问题!

html.body {
  margin: 0px;
  height: 100%;
  width: 100%;
  position:relative;
}

video {
  height: 100vh;
  width: 100vw;
  object-fit: fill;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

<video autobuffer controls autoplay>
  <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>