html - 视频背景未调整到窗口的全高

Question

我在实现视频背景时遇到了两个问题:

1) 调整大小时，我的视频背景不会占据屏幕的整个高度。修复它的最佳方法是什么。

2) 我无法点击“返回网站”按钮。

我该如何解决？

HTML

<div>
  <div id="outer">
    <div id="home-top-video">
      <video autoplay loop muted width="100%">
        <source src="http://view.vzaar.com/2710053.mp4" type="video/mp4" /> Your browser does not support the video tag. We suggest you upgrade your browser.
      </video>
      <div id="top-text">
        <h3 class="wow fadeIn" data-wow-delay="1s" data-wow-duration="2s" style="font-size: 5em">
          Lifestyle
        </h3>
        <div class="gold-line wow fadeIn" data-wow-delay="1.25s" data-wow-duration="2s" style="margin-top: 25px; margin-bottom: 25px;"></div>
        <h5 class="wow fadeIn" data-wow-delay="1.5s" data-wow-duration="2s" style="font-family: 'Josefin Slab', sans-serif; letter-spacing: 4px;">COMING SOON</h5>
      </div>
      <div id="bottom-text">
        <div class="row" style="margin-bottom: 2em; font-family: 'Josefin Slab'">
          <div class="col-md-4 wow fadeIn" data-wow-delay="2s" data-wow-duration="2s">"The way of the world is meeting people through other people."</div>
          <div class="col-md-4 wow fadeIn" data-wow-delay="2.5s" data-wow-duration="2s">"The way we think, we become"</div>
          <div class="col-md-4 wow fadeIn" data-wow-delay="3s" data-wow-duration="2s">"Personal development is a journey, not a destination. Enjoy it, nonetheless."</div>
        </div>
        <div style="width: 100%;">
          <a class="contact-button" href="/about" target="_self" style="z-index: 2">RETURN TO WEBSITE</a>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
#outer {
  width: 100%;
  display: block;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

#outer #home-top-video:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
  background: linear-gradient(to right, rgba(71, 75, 84, 0.7), rgba(71, 75, 84, 0.9));
}

#home-top-video {
  left: 0%;
  top: 0%;
  height: 100vh;
  width: 100%;
  max-width: 1000%;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

#top-text {
  position: absolute;
  left: 50%;
  top: 8em;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #fff;
  z-index: 1;
  font-family: 'Early Bird', sans-serif;
  width: 300px;
}

#bottom-text {
  position: absolute;
  left: 50%;
  bottom: -12px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #fff;
  z-index: 1;
  width: 100%;
}

Answer 1

要使视频适应整个屏幕，包括调整大小的屏幕，您可以将以下样式添加到视频元素本身:

<video id="video" autoplay loop muted width="100%">

#video{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

您的链接不可点击，因为它嵌套在 home-top-video 元素内，其 z-index 设置为 -1。当您简单地删除它时，您的页面样式不会改变。

    #home-top-video {
      left: 0%;
      top: 0%;
      height: 100vh;
      width: 100%;
      max-width: 1000%;
      overflow: hidden;
      position: absolute;  // delete this
      z-index: -1;         // and delete this
    }

虽然这解决了这两个问题，但另一个问题是当您垂直调整屏幕大小时，底部文本会与顶部文本混淆。你可以用 css grid 或 flex 来解决这个问题。但是有太多的 div 和内联样式，我不知道从哪里开始。除了上面提到的两行之外，还有更多的 css 你可以删除而不会注意到样式有任何变化顺便说一句。

我希望这对你有进一步的帮助。