Youtube videos in jQuery dialogs always on top of other content

Question

I am having some troubles embedding videos in a jQuery dialog. It displays and plays all well but it is always in front of other dialogs. When I pass another dialog over the one with the video the video stays on top of everything... Can anyone help?

Answer 1

Your issue has nothing to do with jQuery or JavaScript. It has to do with the z-index of a Flash object.

I've used this solution before with success...

http://manisheriar.com/blog/flash_objects_and_z_index

• Put your Flash content into a wrapper div called flash

• Add <param name="wmode" value="transparent"> to your object tag

• Add wmode="transparent" into the embed tag

• Use CSS to set the position and z-index for your div (don't set negative z-index values as it will hide your Flash)

CSS

#flash {
    position: relative; /*or absolute*/
    z-index: 0;
}

HTML

<div id="flash">
    <object .... >
        <param name="wmode" value="transparent">
        <embed .... wmode="transparent">
    </object>
</div>