Twitter bootstrap – Video keeps playing after modal is closed Firefox

I have an object that loads videos into the DOM via twitter bootstrap’s modal when you click on an image, see fiddle. The video works fine in all browsers except in Firefox. So after some research, I was able to get the video to play in Firefox, see fiddle. The only thing now is that the for loop stops after the first iteration and I can’t get the video to stop playing after you close the modal. I’ve searched everywhere for a solution to the stop the video from playing and can’t figure out why the for loop stops after the first iteration. I’m learning so any help/insight would be highly appreciated!

JavaScript

var dataCollection = {
  'videoData': [
    {
      'id'      : 0,
      'title'   : 'Badminton',
      'company' : 'Pepto Bismol',
      'gifLink' : '...',
      'srcMp4'  : '...',
      'srcWebm' : '...',
      'srcOgv'  : '...',
      'poster'  : '...'
      },
      { ...
     ]
    };

var videos = $('#video');
var modalContent = $('#video-modal');

var appendVideo = function(videoObj) {
  var poster = videoObj.poster;
  var srcMp4 = videoObj.srcMp4;
  var srcWebm = videoObj.srcWebm;
  var srcOgv = videoObj.srcOgv;
  var playpause = document.querySelector('video');
  var stop = document.querySelector('#myModal,.close');
  var video = $('<div class="video col-sm-12 col-md-3"><img src="' + poster + '" data-title="' + videoObj.title + '" data-toggle="modal" data-target="#myModal"/></div>');

  var videoPlayer = $('<video preload="auto" controls><source src="' + srcMp4 + '" type="video/mp4;"><source src="' + srcWebm + '" type="video/webm;"><source src="' + srcOgv + '" type="video/ogv;"></video>');
  videos.append(video);

video.find('img').click(function(e) {
  modalContent.append(videoPlayer);
  // debug
  // alert(videoObj.srcMp4);
  // console.log(videoObj.srcMp4);
});

 playpause.addEventListener('click', function(e) {
    if (video.paused || video.ended) video.play();
    else video.pause();
 });

$('#myModal, .close').on('click', function(){
  video.pause();
  video.currentTime = 0;
  progress.value = 0;
  modalContent.find('video').remove();
});

for (var i = 0; i < dataCollection.videoData.length; i++) {
  var obj = dataCollection.videoData[i];
    appendVideo(obj);
}

HTML

<div class="container row">
  <div id="video"></div>
</div>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <div class="modal-body" id="video-modal"></div>
    </div>
  </div>
</div>

EDIT
Updated working code, works on Firefox, Chrome and Safari:

var videos = $('#video');
var modalContent = $('#video-modal');
var bye = $('#myModal, .close');

var appendVideo = function(videoObj) {
  var poster = videoObj.poster;
  var srcMp4 = videoObj.srcMp4;
  var srcWebm = videoObj.srcWebm;
  var srcOgv = videoObj.srcOgv;
  var video = $('<div class="video col-sm-12 col-md-3"><img src="' + poster + '" data-title="' + videoObj.title + '" data-toggle="modal" data-target="#myModal"/></div>');

  var videoPlayer = $('<video preload="none" controls poster="' + poster + '"><source src="' + srcMp4 + '" type="video/mp4;"><source src="' + srcWebm + '" type="video/webm;"><source src="' + srcOgv + '" type="video/ogg;"></video>');

videos.append(video);
  video.find('img').click(function(e) {
  modalContent.append(videoPlayer);
  // debug
  // alert(videoObj.srcMp4);
  // console.log(videoObj.srcMp4);
});

bye.on('hidden.bs.modal', function () {
  var currentVideo = $('video');
  currentVideo.remove();
});

};

for (var i = 0; i < dataCollection.videoData.length; i++) {
  var obj = dataCollection.videoData[i];
  appendVideo(obj);
}