I have a flash player on a page which plays videos. I also have modal popups (made out of div elements) which need to be able to display over the top of the flash player when they are opened, etc... I can't change either of these requirements since they are part of the spec I have been given.
Flash seems to ignore z-indexes I set on it with css, and the modal popups will therefore only appear above the video player if I set the video player's wmode to opaque or transparent. However, if I do this then the full screen functionality stops working correctly: when I un-fullscreen the video it stays zoomed in.
In short
If you open a popup on an item page or another page containing flash the popup should be displayed above this.
Flash ignores z-index values.
You can stop flash ignoring z-index values by setting wmode to opaque or transparent rather than the default: window.
This stops full screen from working correctly.
Has anybody else faced this issue before? What can I do to fix it? I was thinking of recreating the video player with wmode=opaque whenever I opened a modal popup and then switching it back to wmode=window when the modal popup is closed, since this would mean that the popup should display above it (as wmode=opaque) and the fullscreen should work correct (as wmode=window). However, this is not ideal at all: as well as being a hack it would also mean that the video would stop playing if somebody clicked a button which opened a popup.
Cheers!