Botones de play y pause para iframe video de youtube sin API (de youtube)

Es posible que muchas veces necesitemos un poco más de control del video pero que no nos interese importar la API de youtube para ello,

Aquí voy a mostrar cómo montar unos botones de play y pause para un video de youtube insertado vía iFrame de una manera improvisada.

Codigo HTML:

<iframe src="http://youtube.com/embed/qZ9jpnMGkdA"></iframe>
<br>  <a onclick="play()"><img src="http://cdn1.iconfinder.com/data/icons/bnw/32x32/actions/player_play.png" /></a> <a onclick="stop()"><img src="http://cdn1.iconfinder.com/data/icons/bnw/32x32/actions/player_stop.png" /></a>

<br>
<br>
<br>
Url del iframe: <div id="url"></div>

Codigo CSS: No se ha esmerado demasiado. Solo para mostrar el ejemplo.

<style type="text/css">
a{

cursor:pointer;
    position:relative;
}
a:active{
top:1px;
    right:1px;
}
</style>

Codigo Javascript:

<script type="text/javascript">
function play(){
    url = $('iframe').attr('src');
    if(url.indexOf('autoplay=1') != -1){            
       }else{
           url = url + '?autoplay=1';
       }
    /*simplemente actualizamos la url del iframe añadiendole un autoplay*/
    $('iframe').attr('src',url);
   $('#url').text(url);
}

function stop(){
    /* simplemente actualizamos la url quitandole el autoplay */
    url = $('iframe').attr('src');
    url = url .replace('?autoplay=1','');
    $('iframe').attr('src',url);
   $('#url').text(url);
}
</script>

Como se puede observar, el truco utilizado es cambiar dinámicament la URL del video, añadiendo ?atuoplay=1 para iniciar el video y quitándoselo para parar el video.

Puede parecer una solución algo engorrosa pero cumple su función,

Podeis probar una demo aquí

5 thoughts on “Botones de play y pause para iframe video de youtube sin API (de youtube)

Leave a Reply

Your email address will not be published. Required fields are marked *