スライダ - 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>

これはあなたのために働く場合、私はあなたのためにいくつかの変更を行うとされていない場合、私は、教えてください！