将视频填充到屏幕高度和宽度的整个高度和宽度答案

【问题标题】：Fill a video to the entire height and width of the screen height and width将视频填充到屏幕高度和宽度的整个高度和宽度
【发布时间】：2018-08-16 03:43:30
【问题描述】：

问题：

试图用视频填满整个屏幕的高度和宽度，但我不明白为什么视频没有填满我环绕它的整个容器。
我有一个视频容器 <div>，它用以下样式包裹在 <video> 周围：

代码：

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

【问题讨论】：

标签： css html video html5-video

【解决方案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>

【讨论】：

【解决方案2】：

.videoElem {
    position: absolute;
    width: 100%
}
.wrapper {
    width: 600px;
    height: 400px;
    position: relative;
}

<div class="wrapper">
  <video autoplay muted loop id="myVideo">
    <source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" 
type="video/mp4">
  </video>
</div>

【讨论】：

【解决方案3】：

试试这个！ 点击“运行代码 sn-p”，然后点击“整页”。

#myVideo {
    position: fixed;
    left: 0;
    top: 0;
    min-width: 100vw; 
    min-height: 100vh;
}

<video autoplay muted loop id="myVideo">
  <source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>

【讨论】：

嘿，这几乎可以工作，但视频填充超出了包装视频容器的高度。我只是想让视频填满容器的高度和宽度。