Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

481
Vistas
¿Cómo se pausan varias incrustaciones iframe de Youtube al hacer clic?

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 :).

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda