title: dynamic loading of videos in bootstrap modal
body: <p>I am using modal box of bootstrap to load videos using videojs.
  I need to fetch the video file name from database. </p>
  
  <p>When someone clicks on a link, a <code>playVideo()</code> function is called.
  What I do is that I populate a div with id videoPlayer and populate it with the video code.
  Here is my playVideo function:</p>
  
  <pre><code> function playVideo(id)
    {
     $('video').attr('id','CurrentVideo'+id);
      var videoData=new Array();
     $.getJSON('&lt;?PHP echo base_url();?&gt;admin/content/getVideoDetail/'+id,function(data){
         $.each(data,function(k,v){
             videoData.push(v);
             });
         }).done(function(){
  
       $("#videoPlayer").html('&lt;video id="CurrentVideo'+id+'" class="video-js vjs-default-skin" controls width="530" height="264" preload="none"&gt; &lt;source type="video/mp4" src="&lt;?PHP echo base_url()?&gt;content/videos/'+videoData[3]+'"&gt;&lt;/video&gt;');
  
      myPlayer=_V_('CurrentVideo'+id);
  
      $("#videoBox").modal();
  
      $("#videoBox").on('hide',function(){
       $("#videoPlayer").html('');
      });
         });
     }
  </code></pre>
  
  <p>This works sometimes but is not working very consistently in all browsers. Have i taken a wrong approach? Further, is there any flaw with videojs? should i use some other alternative like flowplayer?</p>