Come riprodurre/avviare il video di youtube dopo aver cliccato su un'immagine?

Question

Ho un'immagine e voglio iniziare un video di youtube solo dopo aver cliccato sull'immagine. Come posso fare questo?

Grazie mille!

Answer 1

Dai un'occhiata alla:

Youtube API examples

il codice sarà qualcosa di simile:

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

Answer 2

Un altro approccio - Interruttore IFRAME SRC (URL) con la versione "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")); 
}); 

Answer 3

aggiungendo autoplay = 1 sembra funzionare solo la prima volta. Sto usando un pulsante start/stop e quando lo clicco la prima volta, aggiungo autoplay = 1. Quindi quando clicco di nuovo rimuovo il autoplay = 1. Funziona bene

ma quando provo ad avviarlo di nuovo (aggiungendo autoplay = 1), non si avvierà.

Answer 4

.click() JQuery gestore di eventi:

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

Answer 5

penso che questo vi aiuterà. Funzionando bene per me.

$('.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>