如何在全屏背景视频下方显示内容

Question

我正在设计一个登录页面，其中有全屏背景视频，当用户向下滚动时，视频下方会显示内容。我设法通过将内容设置为具有 100vh 的顶部边距来使其正常工作，但视频和内容之间存在巨大差距...

HTML

  <body>
  <div class="bgvid-back">
  <video class="bgvid" poster="media/skyline.jpg" autoplay="true" loop muted width="100%">
      <source src="media/BnW.webm" type="video/webm">
      <source src="media/BnW.mp4" type="video/mp4">      
  </video>
  </div> 
  <ul class="menu">
        <li>
            <a href="#" class="navburger" data-toggle="offCanvasLeft">
                <div class="one"></div>
                <div class="two"></div>
                <div class="three"></div>
            </a>
        </li>
        <li><a href="#" class="logo"><img src="media/rsz_lucidity-logo.png"></a></li>
    </ul>
  <p class="content"> lorum ipsum </p>
  </body>

CSS

.bgvid-back {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
} 

.bgvid {
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

}

@media (max-width: 767px) {
.bgvid-back {
    background: url("media/skyline.jpg") center center / cover no-repeat;
}

.fullscreen-bg__video {
    display: none;
}
}
.content {
background-color: #313638;
margin: 100vh 0 0 0;
width: 100vh;
}

这是 atm 的样子：

vid shows in fullscreen as background

when scrolled down can see content but there is a large gap although margin-top: 100vh

在此先感谢您的帮助:)

我是 css 的新手，所以如果这很明显，我深表歉意。

Answer 1

所以您的内容上方有巨大差距的原因是菜单将 100vh 上边距向下推。要修复它，您需要添加如下内容 CSS:

ul.menu {
  position: absolute;
  top: 0;
}

添加后，您的内容应该可以正常运行。让我知道进展如何！

如何在全屏背景视频下方显示内容

how to display content below fullscreen background video

html

css

video

fullscreen