<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- 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://hub.kentrelianceforintermediaries.co.uk/hubfs/3947994/Interbay/InterBay%20TV%20Presentation.mp4" allowfullscreen></iframe> </div> <div class="video-text"> <div class="careertext"> <h1>Meet the experts</h1> <p>See how our dedicated bridging team could help with your complex bridging cases.</p> </div> </div> <a href="#" class="video-play"> <div class="playbtn"> <div class="playpause" id="play_button"><span class="playtext">Play</span></div> </div> </a> </div> </div> <!-- /.video-testimonail -->

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 iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0px; } .careertext { position: absolute; z-index: 1; } .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; }

$(document).ready(function () { $(".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.children('.careertext').fadeOut(); vidWrap.children('.careertext').css('display','none'); vidWrap.find('.video iframe').attr('src', iframePlay); }); });