<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- 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; } }