Play/Pause YouTube video in Pop Up

Vote count: 0

I have a YouTube video contained in the following div:

And the button element tied to opening it:

It's in a hidden pop-up made with the magnific pop library

I have the following javascript to play the video when a user clicks to open the pop-up:

    $('.open-popup-link').magnificPopup({
      type:'inline',
      midClick: true
    });

$(document).ready(function() {
        $('#playPop').on('click', function(ev){
            $('#video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*');   
        });

        $('.closebtn').on('click', function(ev2){
            $('#video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');   
        });

        $('button .mfp-close').on('click', function(ev3){
            $('#video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');   
        });

    });

Currently, the buttons to close the video work, but only after a user manually clicks to play. The video does not autoplay when they click to open the popup containing it. How can I get this to autoplay on click and stop when clicking another button?

asked 28 secs ago

Peter Lum

Let's block ads! (Why?)

Play/Pause YouTube video in Pop Up