tengo un sitio web bootstrap donde tengo un carrusel de búhos, en ese carrusel de búhos tengo videos de youtube incrustados,
<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>el problema es cuando el usuario hace clic en el ícono de reproducción de youtube, el video se está desplazando, así que quiero detener eso o abrir el video a pantalla completa al hacer clic, hice lo siguiente:
$('.stop').on('click',function(){ owl.trigger('stop.owl.autoplay') })pero esto no hace que el carrusel se detenga al hacer clic, ¿alguien puede decirme cómo lograr esto?
esta es mi url en vivo:
ingrese la descripción del enlace aquí
gracias de antemano