title: Video.js, Infinite Scroll, and Masonry: Videos do not load on newly loaded content
body: <p>I am using infinite-scroll.js, video.js, and masonry.js.  The first page loads correctly (i.e., images of videos load within video players within "pintrest-style" boxes. However, as the user scrolls down, only the pintrest-style" boxes load with empty video players (i.e., no images and videos do not play). I think I should be reinitializing video.js somehow, but I can't figure out how to do so properly with multiple videos.  My js code is below. How would I get the newly loaded boxes to load video players?</p>
  
  <pre><code>  $container.infinitescroll({
  debug: false,
  //extraScrollPx: 40,
  bufferPx: 40,
  navSelector  : '#navigation',    // selector for the paged navigation 
  nextSelector : '#navigation a',  // selector for the NEXT link (to page 2)
  itemSelector : '.masonry_object',     // selector for all items you'll retrieve
  loading: {
      finishedMsg: null,
      img: "img/loader.gif",
      msg: null,
      msgText: " ",
      speed: 'fast',
    }
  },
  // trigger Masonry as a callback
  function( newElements ) {
    // hide new items while they are loading
    var $newElems = $( newElements ).css({display:"none"},{ opacity: 0 });
    // ensure that images load before adding to masonry layout
    $newElems.imagesLoaded(function(){
      // show elems now they're ready
  
      $container.masonry( 'appended', $newElems, true ); 
      $newElems.show().delay(1000).animate({ opacity: 1 },1000);
      $newElems.videojs("example_video_number", { "controls": true, "autoplay": false, "preload": "auto" });
    });
  }
  </code></pre>
  
  <p>);</p>