我想在一个视频(html5)上显示一张图片。如果我使用![]()
标签代替视频，那么它可以正常工作，但是当我使用
5个回答
12
链接：https://jsfiddle.net/kNMnr/1487/
使用CSS3中的位置和z-index属性。
<div id="wrap_video">
<div id="video_box">
<div id="video_overlays">Logo</div>
<div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/gKiaLSJW5xI" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
CSS：
#video_box {
position:relative;
}
#video_overlays {
position:absolute;
width:160px;
min-height:40px;
background-color:#dadada;
z-index:300000;
bottom:10px;
left:10px;
text-align:center;
}
- Vidya Tyagi
1
你可以在 CSS 中为图像提供特定的 z-index，并将其位置设置为 absolute，希望这有所帮助...
- abhijit
1
它非常好用，非常感谢！
.logo
{
margin-top: -155px; position: absolute; z-index: auto;
} - tonio
0
看起来z-index是问题所在，正如其他用户所建议的那样，但我想补充一下。如果你只是想在视频之前显示一张图片，你也可以使用html5视频标签的poster属性。
http://www.youtube.com/watch?feature=player_embedded&v=heI69L8fS6Q#at=99
- Martin Beeby
0
poster属性指定了在视频下载或用户点击播放按钮之前显示的图像。如果没有包含此属性，则将使用视频的第一帧。
- Franzé Jr.
0
有一个简单的视频属性，允许使用预加载的图像。
"poster"属性定义了替代视频的海报图像。
- RickyAYoder
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接