title: Dynamically added videos using jquery not playing on mobile
body: <p>I am trying to display video preview when some one touch on that screen on <code>touchstart</code> event by dynamically add video tag and video source (which is <code>.webm</code>) video and will start to play automatically. I can fetch the video tag but video is not getting played. 
  Here is my code:</p>
  
  <pre><code>&lt;div class="thumb-overlay playthumb"&gt;
      &lt;img src="http://img.domain.com/thumbs/2.jpg" title="" alt="" id="2" class="img-responsive "&gt;
      &lt;div class="duration"&gt;15:11&lt;/div&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(e) {
      $(".playthumb").on('touchstart', function(event) {
          var thumb = $(this).children('img')[0];
          var id = thumb.id;
          $('#thumbPlayerM').remove();
          var video = $('&lt;video style="width:100%;height:100%;position:absolute;top:0;left:0;padding:0;margin:0;" id="thumbPlayerM" class="img-fluid" loop=""&gt;&lt;/video&gt;');
          var content = '&lt;source type="video/webm" src="http://img.domain.com/webm/' + id + '/' + id + '.webm"&gt;&lt;/source&gt;';
          $(video).append(content);
          $(video).hide();
          var target = $("#" + id);
          $(target).after($(video));
          $(video)[0].play();
          $(video).fadeIn();
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>I even try this also </p>
  
  <pre><code>var vid = $("#thumbPlayerM");
  vid.play();
  $(video).fadeIn();
  </code></pre>
  
  <p>Video is coming over the image but not playing. Any one can help me? Thank you.</p>