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 appering below the youtube video?

Answer 1

You haven’t closed your image anchor properly, but I don’t think its that.

Its appearing below the video because you’ve put it in a different div, and both have the same class meaning both divs have their own size. Try this:

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 that would work, but thats what I would try.