Убрать двойной клик по превью видео

Есть такой html:

<div class="youtube"
 id="kSFa21iffmvy"
 data-params="modestbranding=1&showinfo=0&controls=1&vq=hd720">
 </div>

И такой jquery:

$(function() {
        $(".youtube").each(function() {
            // Зная идентификатор видео на YouTube, легко можно найти его миниатюру
            $(this).css('background-image', 'url(http://i.ytimg.com/vi/' + this.id + '/sddefault.jpg)');
            // Добавляем иконку Play поверх миниатюры, чтобы было похоже на видеоплеер
            $(this).append($('<div/>', {'class': 'play'}));
            $(document).delegate('#'+this.id, 'click', function() {
                // создаем iframe со включенной опцией autoplay
                var iframe_url = "https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1";
                if ($(this).data('params')) iframe_url+='&'+$(this).data('params');
                // Высота и ширина iframe должны быть такими же, как и у родительского блока
                var iframe = $('<iframe/>', {'frameborder': '0', 'src': iframe_url,'allowfullscreen':''})
                // Заменяем миниатюру HTML5 плеером с YouTube
                $(this).replaceWith(iframe);
            });
        });
    });

Суть вот в чем, на странице размещается несколько роликов с ютуба, я попытался ускорить время загрузки страницы, т.к. она грузилась довольно долго. Нашел такое решение, вместо iframe выводится сначала превьюшка видео. Но проблема в том, что при просмотре страницы с телефона приходится 2 раза кликать на видео, один раз убирается превью, а второй клик запускает видео. На пк же все работает отлично, при первом клике картинка подменяется на Iframe и видео запускается. Как исправить эту ситуацию, чтобы на телефоне не нужно было кликать по 2 раза?