На смартфоне не запускается видео с первого клика

<div class="video-box">
    <div class="video-masck"></div>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/vDTVL9hNzfI" frameborder="0" allowfullscreen></iframe>                              
</div>

Вот JS

$(function() {
    $(".video-masck").on("click", function(playBtnEvent) {
        playBtnEvent.preventDefault();
        parentEl = $(this).closest(".video-box");
        indexVideoBox = parentEl.index(".video-box");
        videoIdAttr = "video_" + indexVideoBox;
        parentEl.find("iframe").attr("id", videoIdAttr);
        $(this).fadeOut(300);
        $("#" + videoIdAttr)[0].src += "?rel=0&autoplay=1";            
    });
});

При клике на блок ".video-mask" он исчезает и событие клика запускает видео. На Десктопе работает с первого клика. На смартфоне исчезает блок ".video-mask но видео не запускается. Приходится кликать отдельно потом и на iframe. Нужно чтобы запускалось видео и на смартфоне с первого же клика.