I have a list of youtube videos on my page. I have used below code which gets image cover of youtube video & while clicking on the youtube image cover it play the respective youtube video. But it works on desktop only. In a mobile device whenever I clicks on youtube image cover it shows again the youtube image with play button instead of playing youtube video directly.
Note: I don't have used any API like youtube iframe_api etc. It's simple iframe for each youtube video & written the below code to display youtube image cover.
function youTubes_makeDynamic() {
var $ytIframes = jQuery('iframe[src*="youtube.com"]');
$ytIframes.each(function (i,e) {
var $ytFrame = jQuery(e);
var ytKey; var tmp = $ytFrame.attr('src').split(/\//); tmp = tmp[tmp.length - 1]; tmp = tmp.split('?'); ytKey = tmp[0];
var $ytLoader = jQuery('<div class="ytLoader">');
$ytLoader.append(jQuery('<img alt="youtube" class="cover lazyload" src="https://i.ytimg.com/vi/'+ytKey+'/hqdefault.jpg">'));
$ytLoader.append(jQuery('<i class="playBtn material-icons">play_circle_outline</i>'));
$ytLoader.data('$ytFrame',$ytFrame);
$ytFrame.replaceWith($ytLoader);
$ytLoader.click(function () {
var $ytFrame = $ytLoader.data('$ytFrame');
$ytFrame.attr('src',$ytFrame.attr('src')+'?autoplay=1');
$ytLoader.replaceWith($ytFrame);
});
});
};
jQuery(document).ready(function () {youTubes_makeDynamic()});
This the code I am using. It work on dekstop but it won't on mobile devices as per expectations.