Question

我想为youtube视频制作海报图像。

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

但是由于我要删除控制器，所以必须使用iframe

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

这样的事情。

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

谢谢！

Answer 1

您可以应用此solution我试过了，

主要思想是，您只需按以下方式显示自定义海报，并包含嵌入的注释代码

<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");
        });
});

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

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

1 个答案: