Youtube Video Autoplay in popup

Question

I\'ve made a popup and placed a youtube video in it. I set video to autoplay. But the problem is video plays when i open the page. It is auto play in global and i want it to aut

Answer 1

So, Ive read a bunch of different threads on this and most of what Ive seen is pretty complicated. I went a much more simple route.

    $('.reveal-overlay').click(function(e){
    var loc = document.getElementById('myFrame').src;
    var stoploc = loc.replace("?autoplay=1", "");
    document.getElementById('myFrame').setAttribute('src', stoploc);
    });

    $('.playVideo').click(function(e){
    var loc = document.getElementById('myFrame').src;
    var autoloc = loc + "?autoplay=1";
    document.getElementById('myFrame').setAttribute('src', autoloc);
    });

This will basically just append ?autoplay=1 to a YouTube video once the modal is opened. The class .playVideo is on whatever button youre using to open your modal window.

The class .reveal-overlay is created by Foundation. So when the overlay is clicked it removes any ?autoplay=1 from the video url.

Hope this helps anyone running into this problem. It's simple and should work for multiple different videos, plus, if someone has js turned off, it won't play anything in the background.

One more thing, the video you load should be a regular non-autoplay video. This will turn it into an autoplay after clicked ony and return it to non-autoplay when closed.