title: Overlay image on YouTube embed
body: <p>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:
  <a href="https://i.imgur.com/at9eqzv.png" rel="nofollow noreferrer">http://i.imgur.com/at9eqzv.png</a>
  <a href="https://i.imgur.com/63Ruljw.png" rel="nofollow noreferrer">http://i.imgur.com/63Ruljw.png</a></p>
  
  <p>Unfortunately, I have not figured out how to do this. I have read the same issue here, and in other places:
  <a href="https://stackoverflow.com/questions/3820325/overlay-opaque-div-over-youtube-iframe">overlay opaque div over youtube iframe</a></p>
  
  <p>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. </p>
  
  <p>This is my CSS:</p>
  
  <pre><code>.youtubeplayer
  {
      background-image: url('img/playbutton2.png') center no-repeat;
      z-index:100;
  }
  </code></pre>
  
  <p>And this is my HTML:</p>
  
  <pre><code>&lt;iframe class="youtubeplayer" width="700" height="455" src="http://www.youtube.com/embed/ScfXNmDkvHo?wmode=opaque" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>Any help would be much appreciated. :)</p>