尽管参数和属性正确，但注入的YouTube iFrame无法自动播放

问题描述

我在页面上输出了一堆Youtube iFrame。由于加载所有这些都会带来性能问题，因此我有一个脚本，当用户单击相关的缩略图时，该脚本将注入iFrame makrkup。

问题是，在铬浏览器中，尽管具有&autoplay=1参数和allow="autoplay;"属性，但视频无法自动播放。（在这里稍作修正，我应该说视频的自动播放不一致-可能有20％的时间。）

如果我添加&mute=1，则每次都会播放视频，但这是不可接受的。如果我将标记直接复制并粘贴到页面上（即脚本运行后生成的内容），则每次都会播放。

<div class="lazyloaded-video" data-youtube-video="tmQkY0QBGXA"><img src="https://picsum.photos/id/77/560/315" class="lazyloaded-video__placeholder"></div>

function youtubeLazyLoad() {
    var lazyloadedVideo = $('.lazyloaded-video');
    
    // Check if the video class is present 
    if (lazyloadedVideo.length) {
        
        // On click we will remove the img and add the iframe along with with the full video URL. 
        $('.lazyloaded-video__placeholder').click(function (e) {
            var lazyLoadedVideoID = $(this).parent(lazyloadedVideo).data('youtube-video');
            $(this).parent(lazyloadedVideo).html(
                    '<iframe class="iframe" width="560" height="315" allow="autoplay;" frameborder="0" src="https://www.youtube.com/embed/' + lazyLoadedVideoID + '?autoplay=1" ></iframe>'
            );
        });
    }
}
youtubeLazyLoad();

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

iframe jquery