我想在一个视频(html5)上显示一张图片。如果我使用
标签代替视频,那么它可以正常工作,但是当我使用
链接: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;
}
你可以在 CSS 中为图像提供特定的 z-index,并将其位置设置为 absolute,希望这有所帮助...
看起来z-index是问题所在,正如其他用户所建议的那样,但我想补充一下。如果你只是想在视频之前显示一张图片,你也可以使用html5视频标签的poster属性。
http://www.youtube.com/watch?feature=player_embedded&v=heI69L8fS6Q#at=99
poster属性指定了在视频下载或用户点击播放按钮之前显示的图像。如果没有包含此属性,则将使用视频的第一帧。
有一个简单的视频属性,允许使用预加载的图像。
"poster"属性定义了替代视频的海报图像。