Hi i am having a problem with my iframe which i have taken from youtube

 

 

<iframe title="YouTube video player" class="youtube-player" type="text/html" width="700" height="345" src="http://www.youtube.com/embed/-Dvee6Ixjy0" frameborder="0"></iframe>

 

 

The problem is, once this is on in Internet Explorer the image that I have popping out above it goes behind the video but on Firefox the image is fine..

 

This the image:

 

<center> <a class="thumbnail" href="#thumb"><img src="jbgameplay2.jpg" alt="James Bond Blood Stone Gameplay 2" width="300px" height="200px" border="0" /><span><img src="jbgameplay2.jpg" height="550" width="900" /><br /> James Bond Blood Stone Gameplay </span></a> </center>

 

 

I have attached screenshots of what i mean about the images.. Web 1= Firefox Web 2 = IE... I want the IE one above the video, I have a seprate CSS file for the IE which i have done a IE hack to do it anybody have any ideas how to solve the problem

The usual method for getting something to show above something else is to use z-index and a position and transparent for the video.

 

Identify the parent div for the item you want on top and add

position: relative; z-index: 5; 

into its style.

 

Identify the parent div of what you want below and add

position: relative; z-index: -1; 

into its style.

 

If you were using object and embed tags for the video I would say add

<param name="wmode" value="transparent"> <!--added into the object tag-->

wmode="transparent" <--added into the embed tag-->

but the YouTube video is coded as HTML5 (which is new) without object and embed tags so I'm not sure if my suggestions can work.

Does anyone know a fix for this?

I'm embedding YouTube videos and with the older Object method it's easy to fix with Wickhams suggestions above.

 

How do we get an embedded iFrame YouTube video to stay underneath?

(My main css menu stays above all things other than the iframe YouTube vids. It's OK in FF and Opera)

 

I'm just a hobbyist. Do any of you regulars know a fix please?