Как играть/запускать видео с YouTube после нажатия на изображение?

У меня есть изображение, и я хочу запустить видео youtube только после того, как я нажму на изображение. Как я могу это сделать?

Спасибо большое!

Ответ 1

Посмотрите:

Примеры API Youtube

код будет примерно таким:

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

Ответ 2

Другой подход - включить iframe SRC (URL) с версией "? 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") );
});

Ответ 3

. click() Обработчик событий JQuery:

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

Ответ 4

Добавление автовоспроизведения = 1 работает только в первый раз. Я использую кнопку запуска/остановки, и когда я нажимаю на нее в первый раз, я добавляю autoplay = 1. Затем, когда я снова нажимаю его, я удаляю автовоспроизведение = 1. Это прекрасно работает.

но когда я попытаюсь запустить его снова (добавив autoplay = 1), он не запустится.

Ответ 5

Я думаю, это поможет вам. Работаю хорошо для меня.

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