How to play/start youtube video after clicking on an image? How to play/start youtube video after clicking on an image? jquery jquery

How to play/start youtube video after clicking on an image?


Have a look at:

Youtube API examples

the code will be something like this:

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


.click() JQuery event handler:

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


Another approach - switch iframe SRC (URL) with "?autoplay=1" version.

<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") );});