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;
}

在YouTube上嵌入图片嵌入

1 个答案:

Demo Fiddle