He estado luchando con esto por un tiempo y probé varias soluciones, pero estoy totalmente atascado en esto: tengo varios videos incrustados de YouTube en mi sitio y tengo botones de navegación. Quiero que los videos se pausen tan pronto como se haga clic en cualquiera de los botones, sin importar cuántos de ellos se estén reproduciendo en ese momento. Los incrusté de la manera clásica usando el código iframe que te da YouTube al hacer clic en "incrustar" y les di la clase ".yt".

Mi función actualmente se ve así:

 $(function () { $('#shadingleft').on('click', function () { rotateLeft(); reset(); selector = selector - 1; if (selector <= -1) { selector = 9; } $('.clicked').toggleClass('clicked'); }) $('#shadingright').on('click', function () { rotateRight(); reset(); selector = selector + 1; if (selector >= 10) { selector = 0; } $('.clicked').toggleClass('clicked'); }) $('#shadingtop').on('click', function () { rotateUp(); $('.clicked').toggleClass('clicked'); }) $('#shadingbottom').on('click', function () { rotateDown(); $('.clicked').toggleClass('clicked'); }) $('.art').on('click', function () { $(this).toggleClass('clicked'); }) });

Como puede ver, ya logré alternar los elementos ".art" resaltados en mi galería usando toggleClass. Desafortunadamente, no parece funcionar para reproducir y pausar videos. Cada vez que se hace clic en uno de los cuatro elementos de "sombreado...", quiero que mis elementos ".yt" dejen de reproducir el video incrustado.

¡Gracias por ayudar!