Hi everyone, I am really stuck with my piece of code. I have a page full of links to popups, and each popup has a youtube video inside. If you play the video, when you close the popup, the video doesn't stop playing automatically. I can stop the video playing with only one video, but the rest don't stop. I am also using a Wordpress ACF loop, so each video url is being generated dynamically in the loop, which I think is causing the issue.

The test site I am working on is here: https://new.pyrographix.co.za/category/projects/live-video-production

Please take a look at my page code and let me know if there is something easy I can do in my code that I can do to fix this issue:

1. <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
   
       <div class="project-box">
           <div id="close<?php the_permalink() ?>"></div>
          
          
           <div class="project-box-image">
          
              
               <div class="project-box-overlay">
                   <div class="project-overlay-links">
                  
                       <a id="video-button" href="#<?php the_title(); ?>" class="button-link">Play video</a>
                       <a class="button-link" href="<?php the_permalink() ?>">View Project</a>
                   </div><!---project-overlay-links-->   
               </div><!---project-box-overlay-->
              
              
               <div id="<?php the_title(); ?>" class="popup-overlay">
                   <div id="popup" class="popup">
                      
                       <a class="close"  href="#close<?php the_permalink() ?>">&times;</a>
                      
                      
                       <div class="content">
                      
                      
                           <?php if( get_field('pop_up_video') ): ?>
                               <div class="video-embed" >
                               <iframe class="youtube" width="800" height="400" src="<?php the_field('pop_up_video'); ?>?autoplay=0&rel=0&enable_js=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                               </div><!---video-embed-->
                           <?php endif; ?>
                          
                           <script>
                               $('.close').click(function(e) {
                                   e.preventDefault();
                                   //$('iframe').attr('src', '');
                                   $('.popup-overlay').addClass('display-none');
                                  
                                   $('.youtube').each(function(index) {
                                       $(this).attr('src', $(this).attr('src'));
                                       return false;
                                   });
                                      
                               });
                      
   
                               $('a#video-button').click(function(){
                                   $('.popup-overlay').removeClass('display-none');
                                  
                               });                                        
                           </script>                                       
                          
                          
                       </div><!---content-->
                   </div><!---popup-->
               </div><!---overlay-->
   
              
               <?php the_post_thumbnail('service-box-image'); ?>
           </div><!---project-box-image-->
          
          
           <a href="<?php the_permalink() ?>">                       
               <h5><?php the_title(); ?></h5>
           </a>
      
           <div class="post-tags">
               <?php the_tags('', ', '); ?>
           </div><!---post-tags-->
          
           <p><?php the_excerpt(); ?></p>
          
       </div><!---project-box-->
   
   
   
                                              
   <?php endwhile; ?><?php endif; ?>