YouTube 嵌入上的叠加图像

Question

我正在尝试在我正在创建的网站上嵌入 YouTube 上的图像。该图像特别是一个播放按钮，将鼠标悬停在该按钮上时会变为橙色。它如下所示： http://i.imgur.com/at9eqzv.png http://i.imgur.com/63Ruljw.png

不幸的是，我还没有弄清楚如何做到这一点。我在这里和其他地方读过同样的问题： overlay opaque div over youtube iframe

但是，这对我根本不起作用。我什至在 Firefox 和 Chrome 中都对此进行了测试，但仍然没有运气。自定义播放按钮确实会在屏幕上闪烁片刻，但很快就消失了。

这是我的 CSS：

.youtubeplayer
{
    background-image: url('img/playbutton2.png') center no-repeat;
    z-index:100;
}

这是我的 HTML：

<iframe class="youtubeplayer" width="700" height="455" src="http://www.youtube.com/embed/ScfXNmDkvHo?wmode=opaque" frameborder="0" allowfullscreen></iframe>

任何帮助将不胜感激。 :)

Answer 1

下面应该给你一个不错的起点，为你的目的进行改进：

Demo Fiddle

HTML

<div>
    <iframe class="youtubeplayer" width="700" height="455" src="http://www.youtube.com/embed/ScfXNmDkvHo?wmode=opaque" frameborder="0" allowfullscreen></iframe>
</div>

CSS

div {
    position:relative;
    cursor:pointer;
    width:700px;
}
div:before {
    content:'';
    position:absolute;
    top:39%;
    left:44%;
    height:60px;
    width:85px;
    border-radius:10px;
    border:1px solid #000;
    text-align:center;
    line-height:30px;
    background:#3AA8FF;
    transition:all 200ms ease-in;
}
div:after {
    content:'';
    position:absolute;
    top:44.5%;
    left:49%;
    display:inline-block;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-left: 12px solid #fff;
    border-bottom: 6px solid transparent;
}
div:hover:before {
    background:orange;
}