title: popup modal jquery playing existing embeded youtube video when trying to play another one
body: <p>I'm trying to make one embedded video play but when i do they all play at the same time. I've spent two days trying to resolve this but to no avail.
  Can someone please help, my coding experience is limited.</p>
  
  <p>Here is the code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="play"&gt;&lt;a data-popup-open="popup-1" href="#"&gt;&lt;/a&gt;&lt;/div&gt;
  
  &lt;div class="popup" data-popup="popup-1"&gt;
  &lt;div class="popup-inner"&gt;
  
      &lt;iframe id="video" width="854" height="480"  frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
  
      &lt;a class="popup-close" data-popup-close="popup-1" href="#"&gt;x&lt;/a&gt;
  &lt;/div&gt;
  
  
  
  &lt;div class="play"&gt;&lt;a data-popup-open="popup-2" href="#"&gt;&lt;/a&gt;&lt;/div&gt;
  
  &lt;div class="popup" data-popup="popup-2"&gt;
  &lt;div class="popup-inner"&gt;
  
      &lt;iframe id="video2" width="854" height="480"  frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
  
      &lt;a class="popup-close" data-popup-close="popup-2" href="#"&gt;x&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.popup {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  background: rgba(0,0,0,0.75);
  z-index: 999;
  
  }
  
  
  .popup-inner {
  max-width: 854px;
  width: 90%;
  padding: 0px;
  position: fixed;
  top: 53%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: auto;
  min-width: 854px;
  
  }
  
  iframe {
  border: 1px solid #151515);
  border-radius: 7px !important;
  z-index: 12;
  }
  
  
  
  .popup-close {
  position: absolute;
  width: 28px;
  height: 28px;
  padding-top: 4px;
  padding-right: 2px;
  padding-left: 2px;
  display: inline-block;
  position: absolute;
  top: 0px;
  right: -8px;
  transition: ease 0.25s all;
  -webkit-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
  border-radius: 1000px;
  background: rgba(0,0,0,0.8);
  font-family: Arial, Sans-Serif;
  font-size: 20px;
  text-align: center;
  line-height: 100%;
  color: #fff;
  z-index:13;
  }
  </code></pre>
  
  <p>JAVASCRIPT</p>
  
  <pre><code>$(function() {
  //----- OPEN
  $('[data-popup-open]').on('click', function(e)  {
      var targeted_popup_class = jQuery(this).attr('data-popup-open');
  
          $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
  
  
  $("#video").attr('src','https://www.youtube.com/embed/mz8qGSaPvI8');
  $("#video")[0].src += "?autoplay=1&amp;modestbranding=1";
  
  
  
  $("#video2").attr('src','https://www.youtube.com/embed/mz8qGSaPvI8');
  $("#video2")[0].src += "?autoplay=1&amp;modestbranding=1";
  
      e.preventDefault();
  });
  
  //----- CLOSE
  $('[data-popup-close]').on('click', function(e)  {
      var targeted_popup_class = jQuery(this).attr('data-popup-close');
  
      $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
  
  $("#video, #video2").attr('src','');
  
      e.preventDefault();
  });
  });
  </code></pre>