如何在视频开始前的 <iframe></iframe> 标签中添加海报图片？

Posted 2023-05-09

【中文标题】如何在视频开始前的 <iframe></iframe> 标签中添加海报图片？

【英文标题】：how do you add a poster image in an <iframe></iframe> tag before the start of a video?

【发布时间】：2015-01-12 18:52:33

【问题描述】：

需要在网站中创建一个直播页面，在没有视频流的情况下，在视频窗口中可能会有海报，直到视频显示为止。 我将不胜感激。

（我已经有了 iframe 标签，只是想知道是否可行。对于我正在使用引导程序的网站。）

谢谢 法尔康

【问题讨论】：

嗨，欢迎来到 ***。你能把你已经有的相关代码sn-p贴出来吗？

【参考方案1】：

试试这个，因为你有 jquery 标记。

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

.video  position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; 
.video img  position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; cursor: pointer; 
.video:after  content: ""; position: absolute; display: block; 
    background: url(play-button.png) no-repeat 0 0; 
    top: 45%; left: 45%; width: 46px; height: 36px; z-index: 30; cursor: pointer;  
.video iframe  position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
 
/* image poster clicked, player class added using js */
.video.player img  display: none; 
.video.player:after  display: none; 

<div class="video">
    <img src="poster.jpg">
     <iframe   src="http://www.youtube.com/embed/rRoy6I4gKWU?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>