根据图像提示自动播放YouTube视频

时间:2018-10-08 01:22:04

标签: youtube

我正在使用以下代码将视频替换为海报图像,因为该页面需要很长时间才能加载多个视频,但是我无法弄清楚如何编辑代码以使视频自动加载。我将其与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()});

0 个答案:

没有答案