"Video Testimonial Bootstrap"
Bootstrap 4.1.1 Snippet by Anita26

<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 ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous"> <!-- video-testimonial-section --> <div class="space-medium"> <div class="container"> <div class="row"> <div class="offset-xl-2 col-xl-8 offset-lg-2 col-lg-8 col-md-12 col-sm-12 col-12 text-center"> <!-- section-title --> <div class="section-title"> <h2>What our customer says</h2> <p>Quisque tempus justo molestie lacus blandit, eget molestie eros tristique. Nulla facilisi. Maecenas mollis ultricies faucibus.</p> </div> </div> <!-- /.section-title --> </div> <div class="row"> <!-- video-testimonail --> <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12"> <div class="video-testimonial-block"> <div class="video-thumbnail"><img src="https://easetemplate.com/free-website-templates/finvisor/images/testi_img_1.jpg" alt="" class="img-fluid"></div> <div class="video"> <iframe src="https://www.youtube.com/embed/KEiAVv1UNac" allowfullscreen> </iframe> </div> <a href="#" class="video-play"></a> </div> <div class="video-testimonial-content"> <h4 class="mb10">Harlan M. Williams</h4> <p>Student Loan</p> </div> </div> <!-- /.video-testimonail --> <!-- video-testimonail --> <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12"> <div class="video-testimonial-block"> <div class="video-thumbnail"><img src="https://easetemplate.com/free-website-templates/finvisor/images/testi_img_2.jpg" alt="" class="img-fluid"></div> <div class="video"> <iframe src="https://www.youtube.com/embed/KEiAVv1UNac" allowfullscreen> </iframe> </div> <a href="#" class="video-play"></a> </div> <div class="video-testimonial-content"> <h4 class="mb10">Alisha A. Delapaz</h4> <p>Retirement Planning</p> </div> </div> <!-- /.video-testimonail --> <!-- video-testimonail --> <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12"> <div class="video-testimonial-block"> <div class="video-thumbnail"><img src="https://easetemplate.com/free-website-templates/finvisor/images/testi_img_3.jpg" alt="" class="img-fluid"></div> <div class="video"> <iframe src="https://www.youtube.com/embed/KEiAVv1UNac" allowfullscreen> </iframe> </div> <a href="#" class="video-play"></a> </div> <div class="video-testimonial-content"> <h4 class="mb10">Rebecca L. Jenkins</h4> <p>Term Insurance</p> </div> </div> <!-- /.video-testimonail --> </div> <div class="row"> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 text-center mt-4"> Created for <a href="https://easetemplate.com/downloads/finance-advisor-website-template/" target="_blank" class="text-primary">easetemplate</a> </div></div> </div> </div> <!-- /.video-testimonial-section -->
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: 'Roboto', sans-serif; letter-spacing: 0px; font-size: 16px; color: #7d7f82; font-weight: 400; line-height: 32px; } h1, h2, h3, h4, h5, h6 { color: #26282c; margin: 0px 0px 12px 0px; font-family: 'Glegoo', serif; font-weight: 700; line-height: 1; } h1 { font-size: 36px; } h2 { font-size: 26px; line-height: 38px; } h3 { font-size: 22px; line-height: 32px; } h4 { font-size: 20px; } h5 { font-size: 16px; line-height: 27px; } h6 { font-size: 12px; } p { margin: 0 0 20px; line-height: 1.7; } p:last-child { margin: 0px; } ul, ol { font-family: 'Roboto', sans-serif; } a { text-decoration: none; color: #7d7f82; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } a:focus, a:hover { text-decoration: none; color: #fe5b10; } .video-testimonial-block { position: relative; width: auto; height: 206px; overflow: hidden; margin-bottom: 30px; } .video-testimonial-block .video-thumbnail { height: 100%; width: 100%; position: absolute; z-index: 1; background-size: cover; top: 0; left: 0; } .video-testimonial-block .video { } .video-testimonial-block .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0px; } .video-testimonial-block .video-play { position: absolute; z-index: 2; top: 50%; left: 50%; margin-left: -40px; margin-top: -18px; text-decoration: none; } .video-testimonial-block .video-play::before { content: "\f144"; font: normal normal normal 14px/1; font-family: 'Font Awesome\ 5 Free'; font-weight: 900; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 50px; color: #b3b5bc; } .video-testimonial-block .video-play:hover::before { color: #172651; } .mb10{margin-bottom:10px;} .section-title { margin-bottom: 40px; }
$(".video-play").on('click', function(e) { e.preventDefault();  var vidWrap = $(this).parent(), iframe = vidWrap.find('.video iframe'), iframeSrc = iframe.attr('src'), iframePlay = iframeSrc += "?autoplay=1"; vidWrap.children('.video-thumbnail').fadeOut(); vidWrap.children('.video-play').fadeOut(); vidWrap.find('.video iframe').attr('src', iframePlay); });

Related: See More


Questions / Comments: