View Full Version : z-index problem with TabPanel & Flash

14 Oct 2010, 6:12 AM
Hi guys,

first of all: I know that this is not a extJS-related problem - it's browser specific, and occurs only with Chrome and Safari.

While developing Aloha Editor (http://www.aloha-editor.com/) we're stuck with flash videos from youtube: we use a TabPanel for our FloatingMenu, which will keep close to the block element you're editing. However, embedding an SWF object will cause the TabPanel to vanish behind the objects - it seems that z-indexes are completely ignored.

After googling for a while I've tried setting the SWF's position CSS attribute to 'relative' to be able to set a z-index, as well as setting it's wmode param to 'opaque' or 'transparent' - nothing works for me. IE and FF handle the z-index fine (without any modifications).

Any ideas?
Thank you!

1 Jun 2012, 12:41 PM
Flash doesn't respect things like z-index. In order to get this to work, you have to directly instruct it to. This is done using the wmode attribute. You can see one solution here when loading youtube videos:

(http://www.eliacom.com/esp/help.php?help)The code you'll need to use looks something like this for youtube embedding. If you are directly embedding the swf, then you need to put in a wmode parameter into the embed or object tag (I can't remember which):

<iframe width="560" height="315" src="http://www.youtube.com/embed/OFqVx378_pI?wmode=opaque" frameborder="0" allowfullscreen>