Есть такой 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 раза?