"video slider"
Bootstrap 3.0.0 Snippet by sumi9xm

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!--/////////////////////////// navbar Start /////////////////////////--> <!--navbar Start--> <saction id="hit-nav-wrapper"> <div class="container"> <div class="hit-main-logo"> <a href="#"><img class="" src="https://lh3.googleusercontent.com/-N4NB2F966TU/WM7V1KYusRI/AAAAAAAADtA/fPvGVNzOkCo7ZMqLI6pPITE9ZF7NONmawCJoC/w185-h40-p-rw/logo.png"> </a> </div> <div class="hit-navbar unset right-slid" id=""> <ul class="hit-nav"> <li><a href="#">Product</a> </li> <li><a href="#">Integrations</a> </li> <li><a href="#">Pricing</a> </li> <li><a href="#">Blog</a> </li> <li class="signup"><a href="#"> Sign-in</a> </li> </ul> </div> </div> </saction> <!--//////////////////////////////// navbar end ///////////////////////////////--> <section id="lab_video_slider"> <div class="container-fluid"> <div class="row"> <div class="swiper-container"> <div class="swiper-wrapper"> <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> <video class="slider-video" width="100%" preload="auto" loop="" autoplay="" style="visibility: visible; width: 100%;" poster=""> <source src="https://dl.dropboxusercontent.com/s/931244iox7i0fpk/working-with-espresso.mp4" type="video/mp4"> </video> </div> </div> </div> </div> </div> </section>
/*///////////////////////////////NAVBAR///////////////////////////////*/ #hit-nav-wrapper { background-color: #777; border-color: #f36; display: block; padding: 15px 0px; } .hit-main-logo{ display:inline-block; float:left; } .hit-navbar .hit-nav { padding: 0px; margin: 0px; margin-top: 15px; float: right; margin-right: 15px; } .hit-navbar .hit-nav li{ list-style-type:none; position: relative; display: block; float: left; } .hit-navbar > .hit-nav > li > a { display: block; padding: 8px 10px; color: #fff; font-size: 16px; line-height: 20px; font-weight: 400; text-decoration:none; font-weight: bold; text-transform:uppercase; } .signup { height: 40px; } li.signup a { color: #f32841 !important; border: none; background: #fff; padding: 8px 35px !important; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12); } li.signup a:hover { box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18), 0 4px 15px 0 rgba(0,0,0,0.15); } li.signup a { border-radius: 6.25em; margin-left: 15px; } /*/////////////////////////////// VIDEO SLIDER/////////////////////////////////*/ .swiper-container { margin: 0 auto; position: relative; overflow: hidden; z-index: 1; } .swiper-container { width: 100%; height: 100%; } .swiper-container-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -o-transform: translate(0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .swiper-slide { -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; width: 100%; height: 100%; position: relative; } .swiper-slide { text-align: center; font-size: 18px; background: transparent; 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; } #lab_video_text_overlay { position: absolute; color: #FFF; width: 100%; top: 25%; } #lab_video_text_overlay .container { text-align: center; margin: 0px auto; } #lab_video_text_overlay .container { text-align: center; margin: 0px auto; background-color: transparent; } #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 .container { text-align: center; margin: 0px auto; } #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%; z-index:99; } @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; } }

Related: See More


Questions / Comments: