Question

我为我的网站创建了一个视频背景，但我试图让它覆盖整个页面。

我的HTML：

<header>
    <video loop muted autoplay playsinline poster="">
        <source src="https://www.gordonmac.com/wp-content/uploads/storm-1.mp4" type="video/mp4">
        <source src="http://freshsauce.test/video/FS Website-FINAL-PRORES.mov" type="video/mov">
    </video>
    <div class="banner">
       <div class="banner-text">
          Header Text Here
       </div>
    </div>
  </header>


<p>yoooooo</p>
<p>yoooooo</p>
<p>yoooooo</p>
<p>yoooooo</p>
<p>yoooooo</p>
<p>yoooooo</p>

我的CSS：

body{
  margin:0;
}
header {
 position: relative;
 height: 100vh;
 min-height: 100%;
 width: 100%;
 background-size: cover !important;
 -webkit-background-size: cover !important;
 text-align: center;
 overflow: hidden;
    z-index:-99;
}
video {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -100;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

正如您所见，<p>yoooooo</p>具有白色背景。 codepen是https://codepen.io/mrsalami/pen/wjmgze

Answer 1

使用css规则位置：固定;而不是位置：绝对;用于视频标签

video {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: -100;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Answer 2

我玩了你的CSS并添加了一些东西。我通常会删除CSS文件顶部所有元素的所有边距/填充。

然后我将您的视频位置从相对位置更改为绝对位置，这意味着什么都不会影响它。

我还删除了！important标签。除非绝对必要，否则我建议不惜一切代价避免这些。即便如此，不惜一切代价避免它们。

* {
  padding: 0px;
  margin: 0;
}
body{
  margin:0;
}
header {
 position: absolute;
 height: 100vh;
 min-height: 100%;
 width: 100%;
 background-size: cover;
 -webkit-background-size: cover;
 text-align: center;
 overflow: hidden;
 z-index:-99;
}
video {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -100;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

header:before {
 content: '';
 display: inline-block;
 vertical-align: middle;
 height: 100%;
}

header .banner {
 display: inline-block;
 vertical-align: center;
 margin: 0 auto;
 width: 85%;
 padding-bottom: 30px;
 text-align: center;
 font:24px 'opensans-bold', sans-serif;
 font-weight: bold;
}

header .banner-text {
 color: #f5f5f5;
 width: 100%;
}

Answer 3

你可以做这样的事情。将position:fixed提供给视频。它涵盖并将top, right, bottom, left设置为0

<强> https://codepen.io/arpanpatel/pen/rvdjGR

video {
  position: fixed;
  top: 0;
  left: 0;
  right:0;
  bottom:0;
  z-index: -100;
  width: 100%;
}

如何使视频背景覆盖整个页面

3 个答案: