滑块 - 在HTML中添加视频标题

Question

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

我有这样的事情：

<!-- 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> 

标题没有出现在视频......

Answer 1

正如我在评论中你会像下面如上所述。

.swiper-slide { 
 
    position: relative; 
 
    clear: both; 
 
} 
 

 
#overlay { 
 
    top: 0; 
 
    position: absolute; 
 
}

<!-- 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"> 
 
      <source src="images/foka.mov" type="video/mp4"> 
 
     </video> 
 
      
 
     <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> 
 
      
 
     
 
     </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>

请让我知道这对你的作品，如果不是我愿意为你做一些改变！