title: how to dynamically add videojs player with javascript?
body: <p>any enlightenment on this problem would be very helpful.</p>
  
  <p>All I'm trying to do is dynamically add a videojs player with javascript. </p>
  
  <pre><code>&lt;div class="video-wrapper" ng-repeat="videos in panel"&gt;
          &lt;button class="remove-video" ng-click="removeFromPanel($index)"&gt;x&lt;/button&gt;
          &lt;video id="{{videos.id}}" class="video-js vjs-default-skin" preload="none" controls width="300" height="210"
                poster="" &gt;
                &lt;source src="{{videos.directory}}" type='video/mp4' /&gt;
          &lt;/video&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>So for each object in the array "panel" I want a video to show. If I try to add a video after the page has loaded the videos do not initialise properly, they just add as normal video tags. </p>
  
  <p>I have tried to use :</p>
  
  <pre><code>_V_("player id", { "controls": true, "autoplay": false, "preload": "auto" }, function(){
          // Player (this) is initialized and ready.
  
          });
  </code></pre>
  
  <p>to set up the player manually, but to no success.</p>
  
  <p>anybody had this problem and managed to fix it ? </p>
  
  <p>I would love to do a js fiddle for this but I have used angular for my app and I can never make it work correctly in jsfiddle. </p>
  
  <p>Thanks for reading and the help in advance</p>