Javascript 滑块-在HTML格式的视频上添加标题

当一张幻灯片是视频格式时，有人知道如何在滑块上添加标题吗

我有这样的想法：

  <!-- Swiper-->
  <div data-height="100vh" data-min-height="480px" data-slide-effect="fade" class="swiper-container swiper-slider">
    <div class="swiper-wrapper text-center">
      <div data-slide-bg="" class="swiper-slide">
        <video class="video-relative">
          <div id="overlay" class="swiper-slide-caption">
            <div class="shell">
              <h1>ProPlast</h1>
              <h6>Proffesional models</h6>
              <div class="button-group"><a href="#" class="btn btn-default btn-sm">More</a><a href="#" class="btn btn-primary btn-md">Contact</a></div>
            </div>
          </div>
          <source src="images/foka.mov" type="video/mp4">
        </video>
      </div>
      <div data-slide-bg="images/slajd1.jpg" class="swiper-slide">
        <div class="swiper-slide-caption">
          <div class="shell">
            <h1>Proplast</h1>
            <h6>We create with passion</h6>
            <div class="button-group"><a href="#" class="btn btn-default btn-sm">More</a><a href="#" class="btn btn-primary btn-md">Contact</a></div>
          </div>
        </div>
      </div>
    </div>
    <!-- Swiper Pagination-->
    <div class="swiper-pagination"></div>
  </div>

前体
专业模型
前体
我们满怀激情地创造

---

标题没有出现在视频中…

正如我在上面的评论中提到的，您可能会喜欢下面的内容

.swiper幻灯片{
位置：相对位置；
明确：两者皆有；
}
#覆盖层{
排名：0；
位置：绝对位置；
}

前体
专业模型
前体
我们满怀激情地创造

您以前试过什么吗？你能放下一些css行或任何尝试过的解决方案吗？你真的想把

div

放在

video

元素里面吗？如果支持

视频

，则除

源

元素外的内容将被忽略。@谢谢您的评论，那么你知道如何在没有div内容的情况下添加标题吗？@dutchsociety这里是指向fiddle的链接：当你在视频元素中没有div时，你可以使用css，使用before{content:“title”}并按照你想要的样式来做，这不是一种很漂亮的方式，但它可以工作。太棒了，很高兴我能帮上忙！