title: I have HTML5 video in a lightbox. Why do multiple videos play and how do I stop them?
body: <p>I have a Fancybox2 window popping up with the following code:</p>
  
  <pre><code>var mediaElementPlayers = [];
  
  $("#video_list_widget a.video_link").fancybox({
      padding : 0,
      width:500,
      height: 360,
      closeBtn: false,
      content: '&lt;video width="500" height="360" controls="controls" autoplay="autoplay" preload="auto"&gt;
      &lt;source type="video/mp4" src="http://pathtomyvideo.mp4" /&gt;
  
      &lt;source type="video/webm" src="http://pathtomyvideo.webm" /&gt;
  
  &lt;/video&gt;',
      afterShow: function() {
          var mediaElementPlayers = [];
          $('video,audio').each(function(){
              mediaElementPlayers.push(new MediaElementPlayer(this));
              console.log(mediaElementPlayers);
          });
      },
  
      beforeClose: function(){
          for (var i=0; i&lt;mediaElementPlayers.length; i++){
              console.log(mediaElementPlayers);
              mediaElementPlayers[i].pause(); // pause
              mediaElementPlayers[i].setCurrentTime(0); // rewind
          }
          $('.fancybox-inner').empty();
      },
      afterClose: function (){
          $('video').remove();
      }
  
  
  });
  </code></pre>
  
  <p>The first time I click the <code>a.video_link</code>, it pops up and plays just fine. Let's call this one Video 1. If I close the lightbox without stopping the video, it's stopped and killed. No problem. </p>
  
  <p>If I click on the <code>a.video_link</code> again, it pops up and starts from the beginning (let's call this Video 2), but with the audio from Video 1 also playing over the top of it. If I now close Video 2's lightbox, the audio from Video 1 keeps playing. If I open the lightbox a third time, the audio from Video 2 also starts. This keeps going, so I can have lots of layers of audio over one another. </p>
  
  <p>Can anyone suggest a solution?</p>
  
  <p><strong>Update:</strong> I can tell you that it doesn't occur when the autoplay attribute is removed, which suggests to me that the raw <code>&lt;video&gt;</code> object is playing before it can get wrapped in the mediaplayer js stuff. I'd really like the autoplay functionality if possible.</p>