'Magnific Popup video is still playing even when I click off

I have a video popup using magnific. I implemented the below tutorial.

https://www.solodev.com/blog/web-design/how-to-add-pop-up-video-into-a-website.stml

The popup works great but when I click out of the video it is still playing the audio. The popup close correctly but you can still hear the audio in the background.

When I close the pop-up I need to video/audio to stop playing as well.

Here is what I have:

   $('.headerVideoLink').magnificPopup({
     type:'inline',
     midClick: true, 
   });         
 });</script> 

<a href="#headerPopup" class="headerVideoLink" target="_blank">View Demo</a>
                  <div id="headerPopup" class="videobox mfp-hide embed-responsive embed-responsive-21by9">
                   <iframe class="embed-responsive-item" width="854" height="480" src="./assets/img/clients/createPurchaser.mp4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                   </div>```
jqueryvideomagnific-popup


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions