如何使用 iframe 为嵌入式 YouTube 放置海报

Question

我想要一个 YouTube 视频的海报图片。

因此，当您单击图像时，您将自动播放 YouTube 视频。

但因为我想删除控制器我必须使用 iframe

<iframe width="560" height="315" src="https://www.youtube.com/embed/q6EoRBvdVPQ?rel=0&amp;controls=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

像这样的东西。

而且我有几个视频要应用，所以我想知道包括iframe的代码应该如何。

谢谢 ！

Answer 1

你可以应用这个解决方案我试过它工作正常

主要思想是您只需按如下所示显示自定义海报，并将嵌入作为注释代码包含在内

<div class="video">
    <img src="poster.jpg">
    <!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/q6EoRBvdVPQ?autoplay=1&amp;rel=0&amp;controls=0" frameborder="0" allowfullscreen></iframe>-->
</div>

当用户单击插入的 YouTube 视频的图像嵌入而不是图像时，如下所示

$(function() { 
    var videos  = $(".video");

        videos.on("click", function(){
            var elm = $(this),
                conts   = elm.contents(),
                le      = conts.length,
                ifr     = null;

            for(var i = 0; i<le; i++){
              if(conts[i].nodeType == 8) ifr = conts[i].textContent;
            }

            elm.addClass("player").html(ifr);
            elm.off("click");
        });
});

这对性能更好，因为在用户单击它之前不会加载嵌入