Question

问题：

试图用视频填充整个屏幕的高度和宽度，但是我不明白为什么视频不能填充我包裹的整个容器。
我有一个视频容器"ignore": "D,E123,E126",，它被包裹在"args": "--ignore D,E123,E126",上，样式如下：

代码：

<div>

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>

Answer 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>

Answer 3

试试看！ 点击“运行代码段”，然后点击“整页” 。

#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>

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

3 个答案: