¿Cómo detener video de YouTube en iframe

[ceaped]

Buenos días

Cargo 2 videos así:

Codepen
¿Cómo detengo los videos cuando paso de uno a otro.

Gracias por su ayuda

[PHPeros]

También puedes embeberlo con HTML5 y manipularlos via DOM (play/pause)

[ceaped]

Hola PHPeros
Algún tutorial para mirar como se hace?

Gracias por tu ayuda

[ceaped]

Hola PHPeros

Así detengo el audio del iframe pero sucede algo curioso.
Me pone un poco lenta la navegación, cuando doy clic sobre los botones me hace una pequeña pausa para cargar.

Código Javascript:

jQuery('iframe').attr('src', jQuery('iframe').attr('src'));
 

¿Cómo evito que esto me suceda?

Gracias por tu ayuda

[elmouse19]

Creo que lo mejor seria hacerlo con HTML5 como dice PHPeros.

Yo tengo algo asi:

Código Javascript:

$( document ).ready(function() {
    $('.play_border').click(function(){
        $('#aduio_ctrl').hide();
        $('#aduio_ctrl2').show();
        document.getElementById('audio').play();
    });
    $('.stop_border').click(function(){
        $('#aduio_ctrl').show();
        $('#aduio_ctrl2').hide();
        document.getElementById('audio').pause()
    });
});
 

Ese código, toma el evento click de un botón, y da play a un reproductor HTML5, luego oculta el botón play y en su lugar muestra el botón stop (o puasa en este caso). Y este boton pausa hace exactamente lo mismo, toma el evento click, pero en lugar de dar play, pone pausa, y luego se oculta para volver a mostrar el play.


Tambien podrias, con tu codigo, hacer un innerHTML con jquery, para cargar el vídeo correspondiente según el link que se use. Eso reemplazara el código de un vídeo por otro, y se detendra por la fuerza.

Mas o menos asi:

Código Javascript:

$("#boton_1").click(function(){
$("#div_1").html( "<iframe id="video" width="432" height="325" src="http://www.youtube.com/embed/hdmsHYJApLQ?showinfo=0" frameborder="0" allowfullscreen></iframe>" );
});
 
$("#boton_2").click(function(){
$("#div_1").html( "<iframe id="video" width="432" height="325" src="http://www.youtube.com/embed/hdmsHYJApLQ?showinfo=0" frameborder="0" allowfullscreen></iframe>" );
});
 

Si te fijas, en lugar de 2 divs para cargar los videos, se usa un solo div. No seria necesario cargarlos previamente en el html. Asi que podrias dejar el html de esta forma

Código HTML:

<ul>
  <li><a id="boton_1" href="#">video 1</a></li>
  <li><a id="boton_2" href="#">video 2</a></li>
</ul>
    	
<div id="div_1">    
</div> 

[ceaped]

Hola elmouse19
Gracias por tu ayuda.
Voy a probar y te cuento