如何在视频下方添加文字答案

【问题标题】：How to add text below video如何在视频下方添加文字
【发布时间】：2017-04-21 08:38:27
【问题描述】：

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

我也在使用 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>

你好世界！

如果您能帮我解决这个问题，我将不胜感激。谢谢。

【问题讨论】：

标签： css html twitter-bootstrap html5-video

【解决方案1】：

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

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

【讨论】：

但是现在的问题是视频没有变成全屏，虽然文字出现在它下面。
我将高度更改为“高度：100vh”，然后它起作用了。谢谢。
好的@YanikWickremasinghe。

【解决方案2】：

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

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

【讨论】：

height: 100vh 是否将视频的大小设置为仅视口高度而不是整个身体？

【解决方案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>

【讨论】：

我保持.video-container 的样式不变，但我只更改了.video-container{width: 100%; height: 100vh;}（从 100% 到 vh）并且效果很好。谢谢。