Tengo varias incrustaciones de Youtube configuradas como una lista de reproducción, con imágenes en miniatura (class="vid-image") para cada video.
Quiero que cualquier video que se esté reproduciendo se pause cuando hagas clic en cualquier imagen en miniatura.
Encontré algo de código, pero solo funciona para el primer video. Para ver lo que quiero decir, reproduzca el primer video y luego haga clic en cualquiera de los cuadros negros (.vid-image) y el video se detendrá.
Pero, reproduzca el segundo o el tercer video y luego haga clic en cualquiera de los cuadros negros, verá que el video no se detiene.
Tengo un JSFiddle configurado aquí: https://jsfiddle.net/74skr0qt/ pero el código también está debajo:
HTML:
<iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/ScMzIvxBSi4?enablejsapi=1&version=3&playerapiid=ytplayer" modestbranding="0" controls="0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/NpEaa2P7qZI?enablejsapi=1&version=3&playerapiid=ytplayer" modestbranding="0" controls="0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/R5jIoLnL_nE?enablejsapi=1&version=3&playerapiid=ytplayer" modestbranding="0" controls="0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <div class="vid-image"></div> <div class="vid-image"></div> <div class="vid-image"></div>JAVASCRIPT:
$('.vid-image').click(function(){ $('.youtube-video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*'); });Cualquier ayuda sería muy apreciada: pasé horas probando diferentes soluciones sin suerte. Soy un principiante en Javascript, por lo que no puedo descubrir cómo ajustar el código.
Gracias de antemano :).
Puede lograr esto cambiando su js a:
function stopAllVideos() { $('.youtube-video').each((i, videoElem) => { videoElem.contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*'); }); }; $('.vid-image').click(stopAllVideos);Ahora está publicando el mensaje solo para el primer video, en su código
$('.youtube-video')[0]significa el video con índice 0.
Lo cambié para publicar el mensaje de pausa para cada elemento de video con el nombre de clase de video de youtube