¿Cómo detener video de YouTube en iframe

[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>