如何在YouTube播放器上放置图像?

时间:2013-04-15 14:28:31

标签: html css z-index

我想在YouTube视频播放器上放置静态图片;然而,它似乎以某种方式阻止了这种情况发生?

到目前为止,我已尝试将z-index设置为高于YouTube播放器,但这不起作用。

例如:

<img src="../example.png"/ width="100" height="100" class="image" />
<iframe width="420" height="315" src="http://www.youtube.com/embed/k6U-i4gXkLM" frameborder="0" allowfullscreen></iframe>


.image { position: absolute; z-index: 10000; }

2 个答案:

答案 0 :(得分:0)

您的代码完美无缺。只是在“../example.png”之后的斜线是不必要的,但无论如何它都会起作用。

答案 1 :(得分:0)

您应该能够将wmode = transparent添加到youtube iframe网址。参见:

Youtube iframe wmode issue

一个工作示例:

http://www.parentmap.local/article/webinar-parents-guide-to-college-admissions

注意弹出菜单如何与视频iframe重叠。

如果由于某种原因无效,您可以使用javascript加载youtube预览图像,然后将叠加层置于其上。只有在有人实际点击该元素时才会加载真实的iframe。

快速Google搜索在youtube图片上找到了这个:

http://www.reelseo.com/youtube-thumbnail-image/

预览图片网页的示例:

http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg

相关问题