我正在使用以下代码将视频替换为海报图像,因为该页面需要很长时间才能加载多个视频,但是我无法弄清楚如何编辑代码以使视频自动加载。我将其与WP Bakery配合使用,因此无法更改iframe选项。当我单击“ playBtn”时,海报图像消失并被视频替换,但是我必须再次单击才能播放。任何帮助将不胜感激。
function youTubes_makeDynamic() {
var $ytIframes = $('iframe[src*="youtube.com"]');
$ytIframes.each(function (i,e) {
var $ytFrame = $(e);
var ytKey; var tmp = $ytFrame.attr('src').split(/\//); tmp = tmp[tmp.length - 1]; tmp = tmp.split('?'); ytKey = tmp[0];
var $ytLoader = $('<div class="ytLoader">');
$ytLoader.append($('<img class="cover" src="https://i.ytimg.com/vi/'+ytKey+'/maxresdefault.jpg">'));
$ytLoader.append($('<img class="playBtn" src="http://localhost:8888/testsite/wp-content/themes/theretailer/images/play.png">'));
$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);
});
});
};
$(document).ready(function () {youTubes_makeDynamic()});