<!-- reference examples at https://www.idangero.us/swiper/demos/#.Vl8kD9-rRHc -->
<section id="lab_video_slider">
  <div class="container-fluid">
    <div class="row">
      <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

      <!-- Link Swiper's CSS -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.2.5/css/swiper.min.css">

      <!-- Swiper -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div id="slide_one" class="swiper-slide">
            <!-- VIDEO -->
            <video class="slider-video" width="100%" preload="auto" loop="" autoplay="" style="visibility: visible; width: 100%;" poster="//dl.dropbox.com/s/pjopy0mu4klisat/working-with-espresso.jpg">
              <source src="//dl.dropbox.com/s/931244iox7i0fpk/working-with-espresso.mp4" type="video/mp4">
                <source src="//dl.dropbox.com/s/g3mo3w34pb8pp2l/working-with-espresso.webm" type="video/webm">
                  <source src="//dl.dropbox.com/s/p37f0avio0x6bs8/working-with-espresso.ogv" type="video/ogg">
            </video>
            <!-- END VIDEO -->
          </div>

          <div id="slide_two" class="swiper-slide">
  <div id="lab_video_text_overlay">
    <div class="container">
      <h2>Lorum Ipsum Deloras </h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie</p>
      <a href="#" class="btn btn-default">View Our Work</a>
      <a href="#" class="btn btn-warning">Learn About Us</a>

    </div>
  </div>
  <!-- end #lab_overlay -->

            <video class="slider-video" width="100%" preload="auto" loop="" autoplay="" style="visibility: visible; width: 100%;" poster="//dl.dropbox.com/s/ijyaav8qzkdtyt5/lab-coding-screenshot.jpg">
              
      <source type="video/mp4" src="//dl.dropbox.com/s/5z4jupv385iboiu/lab-coding.mp4">
        <source src="//dl.dropbox.com/s/5z4jupv385iboiu/lab-coding.mp4" type="video/mp4">
          <source src="//dl.dropbox.com/s/79msa1jcni374v8/lab-coding.webm" type="video/webm">
            <source src="//dl.dropbox.com/s/7bq2tyma5de88bt/lab-coding.ogg" type="video/ogg">
            </video>
          
          </div>

          <div id="slide_three" class="swiper-slide">
             <!-- VIDEO -->
            <video class="slider-video" width="100%" preload="auto" loop="" autoplay="" style="visibility: visible; width: 100%;" poster="//dl.dropbox.com/s/5aeyg9ntj1fs8v1/typing-numbers.jpg">
              <source src="//dl.dropbox.com/s/xmosdvoleruexky/typing-numbers.mp4" type="video/mp4">
                <source src="//dl.dropbox.com/s/13z1t97pcvka88k/typing-numbers.webm" type="video/webm">
                  <source src="//dl.dropbox.com/s/5pyuc35wnv5khe1/typing-numbers.ogv" type="video/ogg">
            </video>
            <!-- END VIDEO -->
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>

      <!-- Swiper JS -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.2.5/js/swiper.min.js"></script>

      <!-- Initialize Swiper -->
      <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            spaceBetween: 30,
            autoplay: 5000,
            autoplayDisableOnInteraction: false
        });
      </script>
    </div>
    <!-- end .row -->
  </div>
  <!-- end .container-->
  </div>
  <!-- end #section -->
.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

/* Text Overlay */
#lab_video_text_overlay h2 {
  font-size:4em
}

#lab_video_text_overlay .btn {
  border-radius:0;
  text-transform:uppercase;
  font-weight:200;
}
#lab_video_text_overlay .btn-warning {
  background-color:#F5D328;
}

#lab_video_text_overlay {
  position: absolute;
  color: #FFF;
  width: 100%;
  top: 25%;
}

#lab_video_text_overlay .container {
  text-align: center;
  margin: 0px auto;
//  background-color: #669900;
}

@media screen and (max-width:991px) {
  #lab_video_text_wrap {
    height: 300px;
  }
}

@media screen and (max-width:650px) {
  #lab_video_text_wrap {
    height: 250px;
  }
  #lab_video_text_overlay h2 {
    font-size: 2em;
  }
  #lab_video_text_overlay p {
    font-size: .9em;
  }
}

External CSS

  1. //maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js