Динамически добавленные видео с использованием jquery не воспроизводятся на мобильных устройствах

Я пытаюсь отобразить предварительный просмотр видео, когда кто-то коснется этого экрана в событии touchstart, динамически добавив тег видео и источник видео (то есть .webm) видео, и начнется автоматическое воспроизведение. Я могу получить тег видео, но видео не воспроизводится. Вот мой код:

<div class="thumb-overlay playthumb">
    <img src="http://img.domain.com/thumbs/2.jpg" title="" alt="" id="2" class="img-responsive ">
    <div class="duration">15:11</div>
</div>
<script type="text/javascript">
$(document).ready(function(e) {
    $(".playthumb").on('touchstart', function(event) {
        var thumb = $(this).children('img')[0];
        var id = thumb.id;
        $('#thumbPlayerM').remove();
        var video = $('<video style="width:100%;height:100%;position:absolute;top:0;left:0;padding:0;margin:0;" id="thumbPlayerM" class="img-fluid" loop=""></video>');
        var content = '<source type="video/webm" src="http://img.domain.com/webm/' + id + '/' + id + '.webm"></source>';
        $(video).append(content);
        $(video).hide();
        var target = $("#" + id);
        $(target).after($(video));
        $(video)[0].play();
        $(video).fadeIn();
    });
});
</script>

Я даже пробую это также

var vid = $("#thumbPlayerM");
vid.play();
$(video).fadeIn();

Видео идет поверх изображения, но не воспроизводится. Кто-нибудь может мне помочь? Спасибо.