Question

所以我正尝试播放youtube视频作为我的div背景。我在网上搜索，这是大多数人所做的事情。

.container-fluid{
  padding:0;
}

/* header section */
.header{
  background: #000;
  position:fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  height: 70%;
  overflow: hidden;
}

.vid-container, .header iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: -1;
}

.header-text{
  color:white;
  z-index:1;
}

.row {
    color: red; /* for debugging */
}

@media (min-aspect-ratio: 16/9) {
    .vid-container { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
    .vid-container { width: 300%; left: -100%; }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<body class = "container-fluid">
<div class="header">
  <div class="vid-container">
    <iframe width="560" height="315" 
    src="https://www.youtube.com/embed/DXA3JYdFKAE? controls=0&showInfo=0&rel=0&autoplay=1&loop=1&playlist=DXA3JYdFKAE&start=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
  <div class="header-text">
    <h1>Welcome</h1>
  </div>
</div>
<div class="row">
  <div class="col-lg-4 feature">
    <i class="fas fa-check-circle orange-tick"></i>
    <h3>Easy to use.</h3>
    <p>So easy to use, even your dog could do it.</p>
  </div>
  <div class="col-lg-4 feature">
    <i class="fas fa-bullseye target"></i>
    <h3>Elite Clientele</h3>
    <p>We have all the dogs, the greatest dogs.</p>
  </div>
  <div class="col-lg-4 feature">
    <i class="fas fa-heart heart"></i>
    <h3>Guaranteed to work.</h3>
    <p>Find the love of your dog's life or your money back.</p>
  </div>
</div>
</body>

最初，这使视频全屏显示。因此，我将标题高度更改为70％，并将溢出更改为隐藏。但是由于标题位置是固定的，所以标题之后添加的所有内容都会显示在标题视频的顶部。如果我移除position：fixed，那么视频就会混乱。在不固定标题的情况下如何执行此操作的任何想法？

我添加了一些我写的旧html，以显示“标头”之后的任何div都位于其顶部。

编辑：由于我的问题的措辞，看来我引起了一些混乱。这是我试图澄清所有疑问的尝试。该网站目前看起来像这样： this image depicts a header div with a video background using 70% of the viewport height. 我的问题是，有没有办法在不使用标题固定位置的情况下达到相同的最终结果？

Answer 1

只需在您的内容中添加位置。我将其设置为绝对值以适合您的示例，但是如果父项位于绝对值中，则可以使用相对值。然后，我将内容从顶部推送70％。

现在，我假设您希望滚动时标题显示在内容上。然后，我建议您将其z-index值设置为100（10或什至1都可以，但是这样您就可以确定永远不要用另一个div覆盖它）

.container-fluid{
  padding:0;
}

/* header section */
.header{
  background: #000;
  position:fixed;
  z-index:100; /* here the z-index set up for the header to overlap everything */
  top: 0; right: 0; bottom: 0; left: 0;
  height: 70%;
  overflow: hidden;
}

.vid-container, .header iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: -1;
}

.header-text{
  color:white;
  z-index:1;
}

.row {
    color: red; /* for debugging */
}

/* Here we set the content poisitoning to absolute and top coordinate = to the height of the header */

.row {
  position:absolute;
  top:70%;
}

/**/

@media (min-aspect-ratio: 16/9) {
    .vid-container { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
    .vid-container { width: 300%; left: -100%; }
}

link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<body class = "container-fluid">
<div class="header">
  <div class="vid-container">
    <iframe width="560" height="315" 
    src="https://www.youtube.com/embed/DXA3JYdFKAE? controls=0&showInfo=0&rel=0&autoplay=1&loop=1&playlist=DXA3JYdFKAE&start=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
  <div class="header-text">
    <h1>Welcome</h1>
  </div>
</div>
<div class="row">
  <div class="col-lg-4 feature">
    <i class="fas fa-check-circle orange-tick"></i>
    <h3>Easy to use.</h3>
    <p>So easy to use, even your dog could do it.</p>
  </div>
  <div class="col-lg-4 feature">
    <i class="fas fa-bullseye target"></i>
    <h3>Elite Clientele</h3>
    <p>We have all the dogs, the greatest dogs.</p>
  </div>
  <div class="col-lg-4 feature">
    <i class="fas fa-heart heart"></i>
    <h3>Guaranteed to work.</h3>
    <p>Find the love of your dog's life or your money back.</p>
  </div>
</div>
</body>

无论如何，我是否建议您尝试使用position:absolute而不是固定的？我不确定这是否是您想要获得的效果。让我知道。

如何将视频作为我的div的背景？

1 个答案: