Image above youtube iframe, is this possible?

Question

I have this HTML:

<div class="frame" id="play"> <img src="images/click.png" alt="facebook"> </div> <div class="frame" id="maru"> <iframe width="418" height="278" src="http://www.youtube.com/embed/hPzNl6NKAG0" frameborder="0" allowfullscreen> </iframe> </div> 

and this css:

 .frame { width: 420px; height: 280px; position: absolute; } #play {z-index: 100} #maru {z-index: 1} 

Why is the image under the youtube video?

Answer 1

You did not anchor the image correctly, but I do not think so.

It appears below the video because you placed it in another div, and both have the same class, since both divs have their own size. Try the following:

HTML

  <div id="vidFrame" class="play"> <iframe width="418" height="278" src="http://www.youtube.com/embed/hPzNl6NKAG0" frameborder="0" allowfullscreen> <img src="images/click.png" alt="facebook" /> </iframe> </div> 

CSS

  #frame { width: 420px; height: 280px; position: absolute; } .play {z-index: 100} .maru {z-index: 1} 

Not sure if this will work, but here is what I will try.

Answer 2

Simple ... Put it down? wmode = opaque after video ID .... in src IFRAME ...

Example:

 <iframe width="418" height="278" src="http://www.youtube.com/embed/hPzNl6NKAG0?wmode=opaque" frameborder="0" allowfullscreen>