Hola a todos
En ocasiones tenemos una serie de videos de youtube embebidos mediante iframes en una misma página, que bien pueden estar ocultos o en tabs. Pero cuando le damos play a uno y después pasamos a otro tab o boton, este no se detiene.
Para lograr pausar un video al dar clic en un boton usaremos javascript y un truco que encontre hace días en stackoverflow (el cual está desactualizado, 2012).
Librerías que necesitamos:
<script src="js/jquery.js"></script>
Insertamos el siguiente código en el <head>
<script>
<!--
$(function() {
//NOTE: in url is necessary add ?enablejsapi=1
function playVideoAndPauseOthers(frame) {
$('iframe[src*="https://www.youtube.com/embed/"]').each(function(i) {
var func = this === frame ? 'playVideo' : 'pauseVideo';
this.contentWindow.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
});
}
$('div a[title^="video"]').click(function() {
var frameId = /video(\d+)/.exec($(this).attr('title'));
//alert(frameId);
if (frameId !== null) {
frameId = frameId[1]; // Get frameId
playVideoAndPauseOthers($('#video' + frameId + ' iframe')[0]);
}
});
});
-->
</script>
y nuestros html debe esta de la siguiente manera:
<div id="video1">
<iframe name="video1" width="600" height="315" src="https://www.youtube.com/watch?v=uYbsSj6t0V4?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
<div id="video2">
<iframe name="video2" width="600" height="315" src="https://www.youtube.com/watch?v=sEe1ZGhYSWs?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
<div><a href="#" title="video1">Opción A</a></div>
<div><a href="#" title="video2">Opción B</a></div>
Tomen en nota y es muy importante, después de la url de cada video hay que agregar
?enablejsapi=1 lo cual indica que se utilizará la API de Youtube
Es todo, cuando le de clic al botón A se iniciará el video1, al dar clic al boton b, se dentendrá el video1 y se iniciará el video2, y viceversa.
El código se puede cambiar y dejar de hacer referencia al atributo title del div y usar un data- , pero eso lo dejo de tarea.
Saludos