I am using owl carousel slider, the slider should only visible and autoplay when we click on a button, currently I need to double click to play video, which is not expected HTML (these are more than 2 sliders, I just put 2 here)
<div class="owl-carousel video-slider">
<div class="video-slide">
<img src="src/media/testimonial-image1.jpg" alt="">
<div class="item-video">
<a class="owl-video" href="https://www.youtube.com/embed/n1a3VZY0xgM"></a>
</div>
<span class="clickIframeBtn"><i class="fa fa-play-circle"></i></span>
</div>
<div class="video-slide">
<img src="src/media/testimonial-image1.jpg" alt="">
<div class="item-video">
<a class="owl-video" href="https://www.youtube.com/embed/n1a3VZY0xgM"></a>
</div>
<span class="clickIframeBtn"><i class="fa fa-play-circle"></i></span>
</div>
</div>
I just have to display a video on the image so, I used position absolute to overlap the video on the image, display none the video slide on first
.item-video {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
transition: all 0.3s ease-in-out;
z-index: 999;
width: 100%;
height: 100%;
}
.owl-carousel .owl-video-wrapper {
position: relative;
height: 100%;
background: #00000026;
}
.fa-play-circle {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 100%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
color: #ff0000;
font-size: 72px;
background-color: rgba(0, 0, 0, 0.2);
cursor: pointer;
border-radius: 5px;
}
I am not good in jquery, I just tried to display block the video div once we click on the icon(button)
$(document).ready(function() {
$('.owl-carousel.video-slider').owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: true,
items: 1,
autoplay: false,
video: true,
lazyLoad: true,
autoplayTimeout: 4000,
autoplayHoverPause: true,
autoplaySpeed: 1000
});
$('.clickIframeBtn').on('click', function(ev) {
$('.owl-video').show();
// $('.testimonial-iframe')[0].src += '&autoplay=1';
ev.preventDefault();
});
});
once clicked on span video should autoplay,
Advance big thanks :)