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

Question

I have an image and I want to start a youtube video only after I click the image. How can I do this?

Thanks a lot!

Answer 1

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

Answer 2

.click() JQuery event handler:

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

Answer 3

Have a look at:

Youtube API examples

the code will be something like this:

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

Answer 4

I think this will help you. Working fine for 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>

Answer 5

adding autoplay=1 only seems to work the first time. I am using a start/stop button and when i click it the first time, i add autoplay=1. Then when i click it again I remove the autoplay=1. That works fine.

but when i try to start it again (adding autoplay=1), it won't start.