Z-Index Flash & Windows Media Player

If you've already seen my previous HOWTO on using the new Windows Media Player plugin for Firefox, you might be asking, can I now z-index Windows Media Player with Flash content?

The answer is a resounding Yes, but you need to have things configured properly.

  1. Install the Windows Media Plugin for Firefox!
  2. Verify the plugin is installed!  Type "about:plugins" in your address bar, you should see an entry for Microsoft Windows Media Player Firefox Plugin (File name: np-mswmp.dll)
  3. Disable video acceleration in Windows Media Player
    Windows Media Player Settings
  4. Use the interface below!

That's great, you say, so how do I do it?

Step 1. First, you need to have gotten yourself setup and through the first HOWTO on using the new plugin. The only difference this time is that we will pass in an additional parameter to the Windows Media Player plugin.

<param name="windowlessVideo" value="true">

Step 2. Likewise, you also need to pass in a new parameter to the flash object, known as wmode. Be sure to include this in the OBJECT and EMBED tags for the SWF. Or, take make life easier, just use SWFObject to insert the SWF!

<param name="wmode" value="transparent">

Step 3. I have also absolutely positioned the DIV containing the flash UI and the Windows Media Player. HTML elements must be absolutely positioned to be z-indexed with other HTML elements.

Step 4. That's it's really. In the example above I have inserted the SWF with wmode="true", and left an area out of the background gradient so that Windows Media can show through the transparent stage.

Questions? Drop me a line via my contact form, I'll try and help out!

Keywords: Windows Media Player, Firefox, z-index, Flash, Internet Explorer, Cross-Browser Windows Media, Scripting Windows Media