Question

我正在创建一个网站，它有一个带导航栏的全屏视频背景，我想从视频向下滚动并查看下面的文字。每当我添加文本时，文本都会在视频下方而不是在视频之后。我想在有人滚动后继续浏览网页，以便下面可以有更多内容（即关于页面的段落）

我也在使用Twitter Bootstrap 3，所以我不知道这是否会改变任何事情。

HTML：

<section id="video">
  <div class="video-container">
  <!-- SAMPLE VIDEOS -->
    <video autoplay="true" loop="true" muted="true" class="main-video" poster="http://placehold.it/350x150">
      <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
      <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
      <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
      <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
    </video>
  </div>

你好，世界！

如果你能帮助我，我真的很感激。谢谢。

Answer 1

.video-container{
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

如果这是你想要的，请告诉我。

Answer 2

您可以在视频容器上使用position:relative并将视频高度设置为100vh。

.video-container{
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

Answer 3

尝试以下代码

<style type="text/css">
    .video-container{
    flot:left;
    width: 100%; 
    }
    .video-container video{width: 100%; height: 100vh;}
    .video-container p{width: 100%; line-height:26px; font-size:24px; text-align:center; padding-bottom:50px;}

    </style>
    <div class="video-container">
      <!-- SAMPLE VIDEOS -->
        <video autoplay loop muted="true" class="main-video" poster="http://placehold.it/350x150">
          <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
          <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
          <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
          <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
        </video>
        <p>this is testing</p>
      </div>

如何在视频下方添加文字

3 个答案: