How can I place an image on top of the YouTube player?

Question

I would like to place a static image on top of the YouTube Video Player; however, it appears as if they somehow block this from occurring?

So far I have tried setting the z-index higher than the YouTube player but this does not work.

For example:

<img src="../example.png"/ width="100" height="100" class="image" />
<iframe width="420" height="315" src="http://www.youtube.com/embed/k6U-i4gXkLM" frameborder="0" allowfullscreen></iframe>


.image { position: absolute; z-index: 10000; }

Why would you want to place an image on top of the youtube video. Why dont you use jquery and when they click on the image it replaces the image with the youtube video instead — Andrew, Apr 15 '13 at 14:30
[this seems to work](http://jsbin.com/ulasow/1/edit) both in Chrome and Firefox. — Denys Séguret, Apr 15 '13 at 14:30
@Matt Can you precise, after having seen my fiddle, what's not working for you ? — Denys Séguret, Apr 15 '13 at 14:34
@dystroy also not working for me i am on firefox 20.0.1 this is what i am seeing http://i.stack.imgur.com/J6UEQ.png — NullPoiиteя, Apr 15 '13 at 14:39
Maybe you guys have Flash on your computer and the youtube player is using it ? — Denys Séguret, Apr 15 '13 at 14:40
@dystroy - I am able to see it working on my end. Let me further investigate... — Matt, Apr 15 '13 at 14:43
Did you try giving the iframe a low z-index in conjunction with giving the image the high z-index and absolutely positioning it? — Lucky Pierre, Apr 15 '13 at 17:33

score 0 · Answer 1 · answered Apr 15 '13 at 18:56

0

Your code works perfectly. Just the slash after "../example.png" is unnecessary but it will work anyway.

answered Apr 15 '13 at 18:56

ofer dofer

631
2
11
28

score 0 · Answer 2 · edited May 23 '17 at 12:12

You should be able to add wmode=transparent to the youtube iframe url. See:

Youtube iframe wmode issue

A working example:

http://www.parentmap.local/article/webinar-parents-guide-to-college-admissions

Notice how the flyout menu overlaps the video iframe.

If that won't work for some reason, you could load the youtube preview image using javascript, then put your overlay on top of that. Only load the real iframe when someone actually clicks the element.

Quick googling finds this on youtube images:

http://www.reelseo.com/youtube-thumbnail-image/

Example from that page of preview image URL:

http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg

How can I place an image on top of the YouTube player?

2 Answers2