如何在点击图像后播放/启动 YouTube 视频？

Question

我有一张图片，我想在单击该图片后才开始播放 YouTube 视频。我该怎么做？

多谢！

Answer 1

.click() JQuery 事件处理程序：

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

Answer 2

看一下：

Youtube API 示例，

代码将类似于这：

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

Answer 3

另一种方法 - 使用“?autoplay=1”版本切换 iframe SRC (URL)。

<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 4

我想这会对你有帮助。对我来说工作得很好。

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

添加 autoplay=1 似乎只在第一次起作用。我正在使用开始/停止按钮，当我第一次单击它时，我添加 autoplay=1。然后，当我再次单击它时，我删除了 autoplay=1。效果很好。

但是当我尝试再次启动它（添加 autoplay=1）时，它不会启动。