I have a simple overlay which works fine but I've just added a YouTube embed to it and when you close the overlay, the video continues to play in the background. I'm hoping someone has an idea to stop this happen! The video pausing would be ideal but jumping back to the start is ok if that's too complicated.

The (inherited) code looks like this:

1. $('#size-guide a').click(function(e){
2. e.stopPropagation(); e.preventDefault();
3. $('.sizeguide-popup-container').addClass('reveal');
4. $('html,body').addClass('noscroll');
5. $("header.mainHeader").css("position", "absolute").css("z-index", "100");
6. });
7. 
   
8. $(document).on("click", ".sizeguide-popup-close", function() {
9. $(".sizeguide-popup-container").removeClass('reveal');
10. $('html,body').removeClass('noscroll');
11. $("header.mainHeader").css("position", "fixed").css("z-index", "9999999");
12. });
13. 
    
14. $('.sizeguide-popup-container').on('click', function(e) {
15.   if (e.target !== this)
16.     return;
17.   $('.sizeguide-popup-container').removeClass('reveal');
18.   $('html,body').removeClass('noscroll');
19.   $("header.mainHeader").css("position", "fixed").css("z-index", "9999999");
20. });

I've tried amending the 2nd block to this:

1. $(document).on("click", ".sizeguide-popup-close", function() {
2. $(".sizeguide-popup-container").removeClass('reveal');
3. $('html,body').removeClass('noscroll');
4. $("header.mainHeader").css("position", "fixed").css("z-index", "9999999");
5. $('.rte__video-wrapper').find('iframe').attr('src','');
6. });

Which certainly stops the video from playing but obviously it completely removes the videos URL so when you relaunch the overlay there's a big empty space where the video should be - any ideas?