Question

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!

Answer 1

Your best shot would probably be to listen for flash.events.FullScreenEvent.FULL_SCREEN and when that occurs force a reset of the width and height of the Video object.

This means that you can continue to use opaque wmode.