2011-09-13 16 views
10

Tengo una imagen y quiero iniciar un video de youtube solo después de hacer clic en la imagen. ¿Cómo puedo hacer esto?¿Cómo reproducir/iniciar el video de youtube después de hacer clic en una imagen?

¡Muchas gracias!

+0

sugieren que muestran algo de código. –

+0

http://code.google.com/intl/fr-FR/apis/youtube/js_api_reference.html –

+1

Aquí hay una publicación con un ejemplo completo de trabajo: http://www.objectpartners.com/2013/08/21/triggering-a-youtube-video-from-click-a-button-image-and-replace-when-ended/ –

Respuesta

8

Tenga una mirada en:

Youtube API examples

el código será algo como esto:

function onPlayerReady(event) { 
    $('img').click(function() { 
     ytPlayer.playVideo(); 
    }); 
} 
+1

El js aquí es incorrecto. ¿Alguien puede arreglarlo? – oyvey

7

Otro enfoque - SRC interruptor de marco flotante (URL) con la versión "autoplay = 1?" .

<a href="#" id="clickMe">PLAY</a> 

<iframe id="iframe" width="1280" height="720" src="//www.youtube.com/embed/F0naUkyEkmM" 
      data-autoplay-src="//www.youtube.com/embed/F0naUkyEkmM?autoplay=1"></iframe> 

jQuery:

jQuery("#clickMe").on('click',function(){ 
    var vi = jQuery("#iframe"); 
    vi.attr("src", vi.data("autoplay-src")); 
}); 
+0

Con este enfoque, si hace clic en "volver" en el navegador, se produce algún lío –

+0

La reproducción automática no funciona en los dispositivos móviles. – sk904861

0

adición de reproducción automática = 1 sólo parece funcionar la primera vez. Estoy usando un botón de inicio/parar y cuando hago clic en él la primera vez, agrego autoplay = 1. Luego, cuando hago clic de nuevo, elimino el autoplay = 1. Eso funciona bien

pero cuando intento volver a iniciarlo (agregando reproducción automática = 1), no se iniciará.

+3

Bienvenido a StackOverflow. Esto parece ser un comentario en lugar de una verdadera solución. Considere mover esto a la sección de comentarios o publicarlo como una pregunta por derecho propio. En cualquier caso, que tengas un buen día! – hiergiltdiestfu

4

.click() jQuery controlador de eventos:

$("#clickMe").click(function(){ 
    $("#iframe")[0].src += "&autoplay=1"; 
    ev.preventDefault(); 
}); 
0

creo que esto le ayudará. Funciona bien para mí.

$('.trigger').on('click', function() { 
 
    $(".video")[0].src += "1"; 
 
});
<a href="#" class="trigger">Click</a> 
 
     
 
<iframe class="video" src="https://www.youtube.com/embed/HJX71gFz_do?autoplay=" frameborder="0" allowfullscreen></iframe>

Cuestiones relacionadas