html - Bootstrap 4 - 在视频上添加文本和按钮

Question

我正在尝试得到这样的东西。但必须使用Bootstrap 4。

我当前的代码如下所示:

<section class="banner embed-responsive-item">
    <video class="hidden-sm-down" autoplay="" loop="">
        <source src="http://www.example/home.webm" type="video/webm">
        <source src="http://www.example/home.mp4" type="video/mp4">
    </video>
    <div class="float-left">YOUR EXPERIENCE STARTS</div><br>
    <a class="btn btn-primary btn-lg" href="#" role="button">Enquire Now</a>
</section>

遗憾的是，输出只是将文本和按钮放在图像的末尾，而不是放在图像的顶部。

Answer 1

video {
  position: relative;
  height: auto;
  width: 100%;
}

h2 {
  position: absolute;
  top: 50%;
  right: 0;
}

a {
  position: absolute;
  top: 50%;
  right: 5%;
}