Javascript load object in DOM

Question

I am trying to find out if my code really does load my page forever or if iteration continues through my javascript object. I have an object with 46 elements, of which 46 images, which also act as modal triggers, should load automatically after the page loads. The page loads half of the images and does not load the rest. The image file size is minimal, at most 97kb. videos that are connected in the object go up to 9mb, but I assume that they do not load until the click event is fired. I'm right? Should I use ajax to download video content? or is my javascript code the culprit? I try to learn as much as possible, so any ideas / advice are welcome and much appreciated!

live site | violin with the same code

Javascript

var dataCollection = {
  'videoData': [
    {
      'id'      : 0,
      'title'   : 'Badminton',
      'company' : 'Pepto Bismol',
      'gifLink' : 'http://reneinla.com/kris/gifs/BadmintonPeptoBismolCommercial.gif',
      'srcMp4'  : 'http://reneinla.com/kris/videos/BadmintonPeptoBismolCommercial.mp4',
      'srcWebm' : 'http://reneinla.com/kris/videos/BadmintonPeptoBismolCommercial.webm',
      'srcOgv'  : 'http://reneinla.com/kris/videos/BadmintonPeptoBismolCommercial.ogv',
      'poster'  : 'http://reneinla.com/kris/videos/BadmintonPeptoBismolCommercial.jpg'
      },
      { ...
     ]
    };

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 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);
});

$('#myModal, .close').on('click', function(){
  modalContent.find('video').remove();
});

$('.myHTMLvideo').click(function() {
    $(this).get(0).paused ? $(this).get(0).play() : $(this).get(0).pause();
  });
};

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>

Answer 1

TRY IT

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