在featherlight灯箱内自动播放youtube iframe

【问题标题】：autoplay youtube iframe inside featherlight lightbox在featherlight灯箱内自动播放youtube iframe
【发布时间】：2016-07-29 08:58:47
【问题描述】：

这是我的DEMO。

点击“播放 Youtube 视频”后，我想自动播放 youtube 视频。这是我的代码，它不适合我。

jQuery('.playButton').click(function(){ 
    jQuery("iframe").each(function() {
        jQuery(this)[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
    });

});

当 iframe 位于灯箱之外时，此代码有效。我理解这种行为，但我需要在灯箱中自动播放。

【问题讨论】：

标签： jquery iframe youtube autoplay featherlight.js

【解决方案1】：

这是我目前所做的工作（这是使用 Featherlight - 超薄 jQuery 灯箱 - 版本 1.3.4）：

$(document).ready(function() {
  $('#play-video').on('click', function(ev) {
    $(".featherlight.featherlight-iframe #slide-video-1")[0].src += "?autoplay=1";
    ev.preventDefault();
  });
}); //end doc ready

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="play-video" data-featherlight="#slide-video-1" href="#"><img alt="" src="../images/slide_1.jpg"></a>

<iframe class="lightbox" id="slide-video-1" width="700" height="525" src="https://www.youtube.com/embed/XXXXXXXXXXX" frameborder="0" allowfullscreen></iframe>

【讨论】：