Overlay image on YouTube embed

Question

I am trying to overlay an image on a YouTube embed on a website I am creating. The image specifically is a play button, which will turn orange when being hovered over. It looks like the following: https://i.stack.imgur.com/7qm5h.png https://i.stack.imgur.com/AzOuB.png

Unfortunately, I have not figured out how to do this. I have read the same issue here, and in other places: overlay opaque div over youtube iframe

However, this has not worked for me at all. I've even tested this in both Firefox and Chrome, and still no luck. The custom play button does flash on screen for a moment, but then quickly disappears.

This is my CSS:

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

And this is my HTML:

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

Any help would be much appreciated. :)

Answer 1

The below should give you a decent starting point, to refine for your purposes:

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