i have a bootstrap website where i have an owl carousel, in that owl carousel i have youtube videos embeded,
<div class="owl-carousel" data-margin="30" data-interval="10000" data-pause="hover" data-responsive-lg="5" data-responsive-md="4" data-responsive-sm="3" data-responsive-xs="1" data-nav="" data-loop="true" data-autoplay="true">
<div id="singam" class="vertical-item item-gallery content-absolute text-center">
<article class="vertical-item post type-post status-publish format-video has-post-thumbnail content-padding border-rad-5">
<div class="stop">
<embed src="https://www.youtube.com/embed/<?=$lp->url?>" wmode="transparent" type="video/mp4" width="90%" height="100%" allow="autoplay; encrypted-media; picture-in-picture" allowfullscreen title="Keyboard Cat">
</div>
</div>
</div>the problem is when user clicks on the youtube play icon, the video is scrolling, so i want to stop that or else open the video full screen on click, i did the following:
$('.stop').on('click',function(){
owl.trigger('stop.owl.autoplay')
})but this doesnt make the carousel stop onclick, can anyone please tell me how to accomplish this
this is my live url:
thanks in advance