javascript - HTML5 视频上方的 H1 文本

Question

我有一个背景视频，我想在其顶部 float 文本。目前它看起来像这样:

绿色横幅是视频，我希望黑色标题文本浮在它的顶部。

具体来说，我希望输入的文本水平和垂直对齐。所以它看起来像这样:

这是我到目前为止尝试过的代码...

HTML

<div class="homepage-video">

        <video autoplay loop muted>
          <source src="https://player.vimeo.com/external/208845912.hd.mp4?s=2c04fe329c04029926a99943f076c84c6b86bb46&profile_id=119" type="video/mp4">
        </video>


        <div class="text-over-video">
            <h1>HEADING TEXT GOES HERE</h1>
        </div>

    </div>

CSS

.homepage-video video {
    position:relative;
    width: 100%;
    height: auto;
    display:table;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: 50% !important;

}

.text-over-video {
    text-align: center;
}

我试过弄乱绝对和相对定位以及 float ，我认为要输入文本我需要添加表格元素吗？

我在这里借助标题图片的帮助实现了这一点:http://ideedev.co.uk/newseed/design/但我终其一生都无法让它与视频一起工作...... <<-- 这是独一无二的部分，我已经使用图像实现了它，但我不能对视频使用相同的方法。如果有人遇到同样的问题，这将对他们有所帮助。

Answer 1

你想使用绝对定位，可以使用top: 50%;左:50%； transform: translate(-50%,-50%); 使其居中。

.homepage-video, .homepage-video video {
  position: relative;
}
.homepage-video video {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: 50% !important;
}

.text-over-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
}

<div class="homepage-video">
  <video autoplay loop muted>
    <source src="https://player.vimeo.com/external/208845912.hd.mp4?s=2c04fe329c04029926a99943f076c84c6b86bb46&profile_id=119" type="video/mp4">
  </video>
  <div class="text-over-video">
    <h1>HEADING TEXT GOES HERE</h1>
  </div>
</div>