HTML 视频背景不允许我为我的容器设置白色背景

Question

我正在尝试在我的网站上开发一个具有 HTML 视频背景的功能，但是，我希望视频下方页面的其余部分具有白色背景。这是 codepen .

这是html代码:

<div class="fullscreen-bg">
  <video loop muted autoplay poster="http://ui.specbee.com/sample/videoframe.jpg" class="fullscreen-bg__video">
    <source src="http://salamij.cuccfree.com/302CEM/assets/video/BackgroundVideo.mp4" type="video/mp4"> 
    <!-- add .ogv and .webm to cover all compatible devices  -->
  </video>
</div>
<div class="home-content">
  <h1>Fullscreen HTML5 Video Background
    <small>Here is a  full screen html5 Video Background with simple steps </small>
  </h1>
</div>
<div class="container">
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

CSS:

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
body {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  background-color:white;
}

.fullscreen-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
}
.fullscreen-bg::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.fullscreen-bg__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.home-content {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 999;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.home-content h1 {
  font-size: 48px;
  color: white;
  padding: 0 10px;
}
.home-content h1 small {
  font: 300 18px "Roboto", sans-serif;
  color: white;
  display: block;
  margin: 10px 0;
}

@media (min-aspect-ratio: 16 / 9) {
  .fullscreen-bg__video {
    height: 300%;
    top: -100%;
  }
}
@media (max-aspect-ratio: 16 / 9) {
  .fullscreen-bg__video {
    width: 300%;
    left: -100%;
  }
}
@media (max-width: 767px) {
  .fullscreen-bg {
    background: url("http://ui.specbee.com/sample/videoframe.jpg") center center/cover no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  .fullscreen-bg__video {
    display: none;
  }
}

当我尝试创建一个新容器时，它没有白色背景，但仍然有视频背景。

Answer 1

试试这个方法，我试过了。它设法显示容器

CSS:

 @import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
    body {
      margin: 0;
      padding: 0;
      font-family: "Roboto", sans-serif;
      background-color:white;
    }
    .fullscreen-bg {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    .fullscreen-bg::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1;
    }


    .fullscreen-bg__video {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .home-content {
      width: 100%;
      position: absolute;
      left: 50%;
      top: 50%;
      text-align: center;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }
    .home-content h1 {
      font-size: 48px;
      color: white;
      padding: 0 10px;
    }
    .home-content h1 small {
      font: 300 18px "Roboto", sans-serif;
      color: white;
      display: block;
      margin: 10px 0;
    }

    @media (min-aspect-ratio: 16 / 9) {
      .fullscreen-bg__video {
        height: 300%;
        top: -100%;
      }
    }
    @media (max-aspect-ratio: 16 / 9) {
      .fullscreen-bg__video {
        width: 300%;
        left: -100%;
      }
    }
    @media (max-width: 767px) {
      .fullscreen-bg {
        background: url("http://ui.specbee.com/sample/videoframe.jpg") center center/cover no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
      }

      .fullscreen-bg__video {
        display: none;
      }

      .container {
        position:absolute;
        background-color:white;
         width: 100%;
      left: 0%;
      top: 100%;
      }
    }

HTML:

<div class="fullscreen-bg">
  <video loop muted autoplay poster="http://ui.specbee.com/sample/videoframe.jpg" class="fullscreen-bg__video">
    <source src="http://salamij.cuccfree.com/302CEM/assets/video/BackgroundVideo.mp4" type="video/mp4"> 
    <!-- add .ogv and .webm to cover all compatible devices  -->
  </video>
</div>
<div class="home-content">
  <h1>Fullscreen HTML5 Video Background
    <small>Here is a  full screen html5 Video Background with simple steps </small>
  </h1>
</div>
</br>
</br>
<div class="container">
  <br>ewedwed<br>wedwedwed<br>wedwedwed<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

我添加了测试用词。 我想这就是你想要的结果。 https://jsfiddle.net/szaa4yk1/