twitter-bootstrap 如何在视频开始前在 <iframe></iframe> 标签中添加海报图片？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26945950/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how do you add a poster image in an <iframe></iframe> tag before the start of a video?
提问by Falkon
need to create a live stream page in a website where in the video window when there is no video stream there could be a poster if you will until the video is shown. would appreciate all the help I could get.
需要在网站中创建一个实时流页面，在没有视频流的视频窗口中，如果您愿意，直到显示视频，可能会有海报。我会很感激我能得到的所有帮助。
( I already have the iframe tags in place just wanted to know if it is possible. for the site I am using bootstrap.)
（我已经有了 iframe 标签，只是想知道它是否可能。对于我正在使用引导程序的网站。）
Thank you Falkon
谢谢法尔康
采纳答案by Billy
Try this as you have jquery tagged.
试试这个，因为你有 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 width="940" height="529" src="http://www.youtube.com/embed/rRoy6I4gKWU?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>