Html 视频背景未调整到窗口的全高_Html_Css

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

html css

Html 视频背景未调整到窗口的全高,html,css,Html,Css,我的视频背景的实现有两个问题： 1）我的视频背景在调整大小时不会占据屏幕的全部高度。最好的修复方法是什么 2）我不能点击“返回网站”按钮我怎样才能修好它 HTML <div> <div id="outer"> <div id="home-top-video"> <video autoplay loop muted width="100%"> <source src="http://view.vz

我的视频背景的实现有两个问题：

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>

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

您的链接不可单击，因为它嵌套在home top视频元素中，而who的z索引设置为-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网格或flex解决这个问题。但是有太多的div和内联样式，我不知道从哪里开始。除了上面提到的两行之外，还有更多的css可以在不注意样式变化的情况下删除

我希望这能对您有所帮助。

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

您的链接不可单击，因为它嵌套在home top视频元素中，而who的z索引设置为-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
    }

我希望这能进一步帮助您。

解决方案1：（i）。如果你想让你的网站视频背景占据整个屏幕的高度，尽管它已经调整了大小或者其他任何东西

只需编写以下CSS属性

(ii)。你通过的评论

我不介意如果视频失去了部分宽度，只要它的居中

然后再添加一个属性

object-position: 50% 50%;

解决方案2：点击“返回网站”按钮。在css文件中，您编写了以下代码

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

因此，id=“home top video”（子区域）位于id=“outer”（父区域）下方，因此您无法访问子区域内容。所以只需在下面的代码中删除它

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