如何使用 iframe 为嵌入式 youtube 放置海报 [英] How to put poster for embedded youtube using iframe

问题描述

我想要一个 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 在内的代码应该如何.

谢谢！

解决方案

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

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

<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>-->

当用户点击嵌入的 YouTube 视频的图像而不是如下图像时

$(function() {var 视频 = $(".video");视频.on(点击"，功能(){var elm = $(this),conts = elm.contents(),le = conts.length,ifr = 空；for(var i = 0; i

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

I want to have a poster image for a youtube video.

So when you click an image, you will autoplay youtube video.

But since I want to remove controller I have to use 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>

Something like this.

And I have several videos to apply, so I wonder how the code including iframe should be.

Thanks !

解决方案

you can apply this solution I Tried it is working fine

the main idea is you just display you custom poster as following and include the embed as commented code

<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>

when user click on the image embed of the youtube video injected instead of the image as following

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

which is better for performance because embeds won't be loaded until user click it

这篇关于如何使用 iframe 为嵌入式 youtube 放置海报的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！