autoplay youtube iframe inside featherlight lightbox

Question

Here is my DEMO.

I want to autoplay youtube video once clicked on "Play Youtube Video". Here is my code which isn't working for me.

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

});

This code works when iframe is outside of lightbox. And I understand that behaviour but I need to autoplay within lightbox.

score 1 · Answer 1 · edited Jan 16 '18 at 10:59

Here is what I did that currently works (this is with Featherlight - ultra slim jQuery lightbox - Version 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>

autoplay youtube iframe inside featherlight lightbox

1 Answers1