miércoles, 27 de julio de 2016

Detener un video de Youtube con javascript insertado mediante iframe

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