我想在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; }
答案 0 :(得分:0)
您的代码完美无缺。只是在“../example.png”之后的斜线是不必要的,但无论如何它都会起作用。
答案 1 :(得分:0)
您应该能够将wmode = transparent添加到youtube iframe网址。参见:
一个工作示例:
http://www.parentmap.local/article/webinar-parents-guide-to-college-admissions
注意弹出菜单如何与视频iframe重叠。
如果由于某种原因无效,您可以使用javascript加载youtube预览图像,然后将叠加层置于其上。只有在有人实际点击该元素时才会加载真实的iframe。
快速Google搜索在youtube图片上找到了这个:
http://www.reelseo.com/youtube-thumbnail-image/
预览图片网页的示例: