force flash to play below dhtml menu?

**dkute** · Aug 8, 2005 10:28

The PNG thing doesn't work for me in either IE or Firefox.
The wmode thing works well with IE but doesn't seem to work with Firefox.
What is the real solution?

Thanks

**Westly** · Aug 18, 2005 17:16

How do you even fix all of these problems, i had all the same.
thx

**barrierobinson** · Aug 21, 2005 08:19

This does work, and in most browsers. Unless you have any type of onmouseover css in Mozilla or Safari on a mac. The change of state, such as link text to underline on mouseover, makes the Flash movie appear and disappear over the div layer. I can't find a work around at all. Any ideas?

http://new.emotus.com/

I thought of dropping the flash into an iframe and reducing the width as the layers appear. But in Explorer Mac the iFrame sits on top too. Would work if I didn't have the second lower div appearing and disappearing.

**CrabbyX** · Aug 22, 2005 17:53

An annoying thing about this, is that you can't get these DHTML menus to appear over Flash advertisements such as served by FastClick/Tribal Fusion, because you can't mess with the flash embedding code

I suppose this is now impossible?

**sparkdigital** · Sep 21, 2005 07:54

Hi Guys,

I was really struggling to get things looking right in FF, but the example on communitymx.com works fine in both IE and Firefox.

The trick is to use the wmode and menu code not only under the other param lines (does the trick for IE) but to also print the code in the embed src line at the bottom, this willl display things properly in Firefox too!

Code:

  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,29,0" width="640" height="290">
    <param name="movie" value="example.swf">
    <param name="quality" value="high">
    <param name="wmode" value="opaque">
    <param name="menu" value="false">
    <embed src="../img/flash-bedrooms.swf" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" 
wmode="opaque" menu="false" width="640" height="290"></embed>
  </object>

Hope this saves you some frustration!

Konrad

**RetroNetro** · Sep 21, 2005 07:59

Originally Posted by sparkdigital

Hi Guys,

I was really struggling to get things looking right in FF, but the example on communitymx.com works fine in both IE and Firefox.

The trick is to use the wmode and menu code not only under the other param lines (does the trick for IE) but to also print the code in the embed src line at the bottom, this willl display things properly in Firefox too!

Code:

  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
  swflash.cab#version=6,0,29,0" width="640" height="290">
      <param name="movie" value="example.swf">
      <param name="quality" value="high">
      <param name="wmode" value="opaque">
      <param name="menu" value="false">
      <embed src="../img/flash-bedrooms.swf" quality="high"
  pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" 
  wmode="opaque" menu="false" width="640" height="290"></embed>
    </object>

Hope this saves you some frustration!

Konrad

Is that not exactly what it says to do on the link in the 4th post in this thread?
http://www.macromedia.com/cfusion/kn...fm?id=tn_14201

**Halo-13** · Sep 26, 2005 14:59

Well, after many tries of tweeking and trying the different ways suggested on this post I am still having problems getting it to work with Firefox(1.0.5). I think I have figured out that you HAVE to use the 'embed' tag, which for me creates another problem for me... the page will no longer validate for XHTML. ARGH!

**mooza_2000** · Nov 6, 2005 07:05

hello ,

it wasn't work in the begining with FF ..... but after several searches it is done at last

just make a flash called flash.swf and publish it in the browser and replace the code in the browser by the following one :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>
<title>flash</title>
</head>
<body bgcolor="#ffffff">


<div id="flashcontain">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="548" height="106">
<param name="wmode" value="opaque" />
<param name="movie" value="flash.swf" />
<param name="quality" value="high" />
<param name="menu" value="false">
<embed src="flash.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="opaque" menu="false" height="106" width="548">
</object>
</div>
<div id="table"><table>
<tr>
<td width=150 height="200" bgcolor="#993300"> texttexttexttexttextxttexttexttexttexttexttexttexttext</td>
</tr>
</table></div>
</body>
</html>

**jamesbond** · Dec 7, 2005 17:18

The wmode opaque/transparent values do hide the flash part, but in my case (a flash scroller) I noticed that in MSIE scrolling is slower and instead of smooth it is jerky. In Firefox everything works the same regardless of the wmode value.

Any idea how to solve this in MSIE?

Changing the quality parameter doesn't seem to make a difference.

**dc dalton** · Feb 9, 2006 12:40

I'm hoping someone who knows what they are doing sees this and knows what the heck I'm talking about. On this page:

http://dcpromotionsltd.com/index.php I have two very strange issues between the menus and the Flash. I've read all the posts here and done hours worth of research but nothing seems to work.

In Safari when the menus drop down the customer is telling me the Flash completely disapears. (the "right now section with the 3 CD covers)

In MAC AOL (half this company uses AOL :'( ) They say the Flash shows up but the CD covers in the Flash DONT .... weird because the text and the rest of the Flash does. I'm thinking on this one it might be some type banner blocker.

I don't have a MAC to look at this and the client is not what you would call "computer savvy" so I could really use some educated info here.

thanks

**coconnor** · Mar 27, 2006 18:14

Originally Posted by distendo

This is the partial answer: it fails in Mozilla (Firefox and Mozilla 1.5) and Opera (and the dhtml menu scrunches up in Opera). I haven't tried any other browsers, but gather it's only good for IE.

It's an annoyance...

Deo's strategy works flawnessly in Firefox and Safari (Mac). Props, Deo!

**Hallipa** · Sep 3, 2006 20:46

OK, in case someone's still looking for a quick answer, here's what works for me in IE 6 and Firefox 1.5. I figured it out combining various suggestions in this thread. Thank you.

Stick this normal param tag in with the rest, as usual:

Code:

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

This'll make it work in Explorer.

Then put this

Code:

wmode="opaque"

inside your embed tag, like this:

Code:

<embed wmode="opaque" src="file.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="535" height="331"></embed>

This'll make it work in Firefox.

Don't ask me since when wmode is an HTML attribute, for it beats the crap out of me, but it works. This wmode deal, of course, will ruin your valid code if ran through the W3C validator.

**gnarly** · Oct 4, 2006 05:33

Originally Posted by Halo-13

the page will no longer validate for XHTML. ARGH!

SWFObject is the answer to that one - http://blog.deconcept.com/swfobject/

**cgfreak™** · Oct 5, 2006 10:58

Originally Posted by sparkdigital

Hi Guys,

I was really struggling to get things looking right in FF, but the example on communitymx.com works fine in both IE and Firefox.

The trick is to use the wmode and menu code not only under the other param lines (does the trick for IE) but to also print the code in the embed src line at the bottom, this willl display things properly in Firefox too!

Code:

  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,29,0" width="640" height="290">
    <param name="movie" value="example.swf">
    <param name="quality" value="high">
    <param name="wmode" value="opaque">
    <param name="menu" value="false">
    <embed src="../img/flash-bedrooms.swf" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" 
wmode="opaque" menu="false" width="640" height="290"></embed>
  </object>

Hope this saves you some frustration!

Konrad

works fine for me, have a look here http://cgfcreations.net/index-3.html

**Dennis_gull** · Oct 29, 2006 13:29

Originally Posted by cgfreak™

works fine for me, have a look here http://cgfcreations.net/index-3.html

I have a menu and lightbox on my site to but I cant get this to work, this is how i did the menu (click on "creating animated buttons"
And I use <param name="wmode" value="opaque">
and in the embed I use wmode="opaque"

I also tried to put in menu="false" but didnt make any differense..

Heres my problem in Mozilla:
When I use the scroll bar on the right side of the site the flash sometimes get inactive so I have to click on it once to make the buttons work.. How can I fix this?

**hasenstein** · Nov 13, 2006 12:13

FYI:

The example by "sparkdigital" (21 Sep) said to work in FF too (http://www.communitymx.com/content/s...modeopaque.htm) does not work here... Linux, FF 2.0. Works in Windows XP and FF 2.0 though, but the Linux version is different it seems. Using FP9 (XP) and FP9-beta (Linux).

Michael

UPDATE: Found this at Adobe (forum)
http://www.adobe.com/cfusion/webforu...&enterthread=y

UPDATE-2: Found a relatively light (i.e. it may be acceptable for many designers) hack that actually works, in both the browsers mentioned above (Linux AND XP version of FF2):
http://marcoos.com/2006/07/21/html-d.../#comment-2292
Quick Example: http://piast.pertus.com.pl/~marcoos/flashlinux/

**vidman** · Nov 14, 2006 03:36

Ok so from what I can see the problem is that IE's requirement to have to "click to activate" flash means we have to run scripts and hacks to overcome this problem, and it is these hacks and scripts that are causing the flash to always sit over any dhtml- am i correct?

SO- what solutions have we found?

I currently use the dreamweaver script for the flash/IE problem and that seems to be the cause for my problems.

Does anyone have a solution other than messy iframes and such hackery?

Im at a total loss!!

**vidman** · Nov 15, 2006 19:30

Thanks to a friend at another forum for this tip.

There IS a way to make flash run UNDER dhtml and still avoid IE's "click to activate" feature (ahem!).

See how here- http://blog.deconcept.com/swfobject/

It took a bit of getting my head around how it all works but its not that hard in the end. I had to dig a bit more as my flash is pulling random movies and such but once you figure out how the so.addParam works, it's easy stuff (basically the same as the old way of publishing flash).

See it in action here- http://www.zacspeed.com/exotecsp3.shtml (click on the product images to see the dhtml running OVER the top of the flash header).

There is an extension for Dreamweaver so you use this method with just a few mouse clicks (http://www.communitymx.com/abstract.cfm?cid=3DA1E).

**mhulse** · Nov 16, 2006 15:57

TinyURL for this post: http://tinyurl.com/yk3jdg

I have noticed these types of questions popping-up from time-to-time... so I thought I would ~~dedicate a thread~~ (twas moved to this thread) with all the answers that I am aware of... Hopefully it will save others time in the future:

By default, Flash is always on top.
Applying a wmode of opaque or transparent is the solution [for most situations].

Read this... more specifically view this example.

Conclusion

This article has shown you reasons you may want to use opaque mode in your Flash movies. Opaque mode allows your DHTML drop down menus to stay in front of your Flash movie as well as hiding non-essential Flash from screen readers. Yes, transparent mode will also allow your DHTML drop down menus to render properly and will hide non-essential Flash, but due to possible performance issues, that's best left for opaque mode. Use transparent mode to show elements stacked beneath your Flash movie and when actual transparency is needed.
I suggest folks use SWFobject (See also: UFO).
Example using SWFobject with a wmode setting of opaque:
Code:
```
<script type="text/javascript">
    var so = new SWFObject("images/news.swf", "news", "160", "60", "6", "#000000");
    so.addParam("wmode", "opaque");
    so.write("flashcontent");
</script>
```
SWFobject resources: homepage, ~~mailing list, list archives~~ FORUM, and Why SWFobject is better than the rest.
UPDATE: UFO looks like a great (unobtrusive) alternative to SWFobject -- For more info, see "Related/interesting links" section below.
IMPORTANT: If you decide to manually embed your Flash object, remember to put the opaque (or transparent) code in both places:
Code:
```
<object ... >
    <param name="wmode" value="opaque">
    <embed ... wmode="opaque" ... >
</object>
```
ATTENTION! Safari users:

I quickly slapped-together an example page, and tested Safari using these computers:
- iBook g4 using OS 10.4 and Safari 2.0.4(419.3)
- MacBook Intel OSX 10.4.8, using Safari 2.0.4(419.3)
Although not perfect, it appears that Safari functions better using a wmode of "transparent".

Unfortunately, this finding conflicts with the conclusion of this article: "... Yes, transparent mode will also allow your DHTML drop down menus to render properly and will hide non-essential Flash, but due to possible performance issues, that's best left for opaque mode. Use transparent mode to show elements stacked beneath your Flash movie and when actual transparency is needed."

If you are not happy with how Safari handles wmode, see "Alternative fixes/hacks/workarounds" section below for a list of other possible solutions.
ATTENTION! Linux users:

Will WMODE, or windowless mode, be supported with this release of Flash Player 9 for Linux?
No, support for WMODE requires changes to the browser; Adobe is working with Mozilla to enable this functionality for Firefox. For more information and to track the issue, please see Bugzilla 137189.

RESOLVED, see Bugzilla 137189.

Alternative fixes/hacks/workarounds:

iFrame shim:
- Possible solution for Linux (and Safari? Other?) users.
- To be considered a last resort solution.
- iFrame shim example page.
- Google: iFrame shim.
"Hide the flash object or select box when the menus open. I usually put a placeholder in for the object that is obstructing the menu so that the document flow doesn't change." -- Jordan West of Westward Web Development, via webdesign-L.com.
Avoid using "flyouts" completely.
Design a menu system that does not use "flyouts."
Design your site so that Flash does not interfere with crucial GUI elements like the navigation.
Accept the problem -- It is still somewhat usable, right?
"Build your navigation into the offending Flash piece" -- Andy W., via WSG listserv.
Here is an example site: not a dropdown, but still good use of a Flash menu and swfObject -- view the source.
Use PHP/JS to browser sniff/dynamically change the wmode (transparent for Safari, and Opaque for all the rest.)
Other?

Adobe KB Technotes and FAQ:

Some other helpful threads:

Related/interesting links:

Unobtrusive Flash Objects (UFO)

UFO is a DOM script that detects the Flash plug-in and embeds Flash objects (files with the .swf extension). It has its roots in the Web Standards community and is designed to support W3C standards compliant, accessible and search engine friendly web design. It also contains several features and best practice techniques that other scripts currently don't have.
- An example using the UFO embedding method with wmode set to transparent, by Tony Crockford. (Browsercam) -- Thanks Tony!
Layering flash and html tutorial, by Nick Cowie.
Objecty

Objecty makes it dead simple to put video and audio on the web. It's meant to re-swizzle the whole paradigm. (Or something.)
Update 06/27/07: MS Silverlight: Windowless Property. Hat tip: John Dowdell.

Silverlight is a cross-browser, cross-platform plug-in for delivering the next generation of Microsoft .NET–based media experiences and rich interactive applications for the Web. -- Link
Update 06/28/07: Safari 3 Public Beta: "The world’s best browser. Now on Windows, too."

Related [deprecated?] topics:

Flash Satay: Embedding Flash While Supporting Standards. See also: Why SWFobject is better than the rest
Javay was another method, but I can not find a link (used to be in comments of ALA Satay article above)... still, swfObject is the best way to embed Flash (imho).

www.hillmancurtis.com embeds Flash like so:

Code:

<script type="text/javascript">RunFoo();</script>

And here is the js:

Code:

function RunFoo() {
    document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="400" height="300">\n');
    document.write('<param name="movie" value="hc_web/index_page/visitors_summer04.swf" />\n');
    document.write('<param name="quality" value="high">\n');
    document.write('<embed src="hc_web/index_page/visitors_summer04.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="300"></embed>\n');    
    document.write('</object>\n');
}

I think the above hillmancurtis method was the essence of the Javay method... though I can't fully remember.

Edit:

Original Javay ALA comment found here.

WMODE, a brief history:

Background: Towards IE4 or so, Microsoft introduced the ability to have browser extensions draw into the browser's own compositing buffer rather than directly to screen, enabling effects like layering and transparent backgrounds. Netscape Navigator followed with WMODE support a few years later, and now most browsers can accept plugin content as drawing inputs. -- John Dowdell, via webdesign-L.com.

More tips/suggestions/corrections/additions are welcome.

Cheers,
Micky

**KahL** · Nov 30, 2006 08:35

Thanks a lot Cleofus and all of you, you saved my life

**invertigo** · Mar 21, 2007 01:01

Ok, here's where I'm at. Thanks to all the previous posts that helped me get this far, even though it's taken nearly a day!

SWFObject page with so.addParam("wmode", "opaque"); - does not work. Take a look.

A page published by Flash with Window mode set to windowless opaque, works, but is a nightmare for validation. Take a look.

Can anybody help me get the SWFObject method working? Looks to me that I'm doing it right, but it just doesn't work :S

Much appreciated,
invertigo.

**mhulse** · Mar 21, 2007 01:15

I could be wrong, but I think you need your so.write after setting your params.

Like so:

Code:

<div id="flashContent">
<strong>You need to upgrade your Flash Player</strong> This is replaced by the Flash content. Place your alternate content here and users without the Flash plugin or with Javascript turned off will see this. Content here allows you to leave out <code>noscript</code> tags. Include a link to <a href="?detectflash=false&amp;wmode=opaque">bypass the detection</a> if you wish.
</div>

<script type="text/javascript">
	// <![CDATA[
	var so = new SWFObject("./src/bug1.swf", "bug", "100&#37;", "560", "8", "#cccccc");
	so.addParam("wmode", "opaque");
	so.write("flashContent");
	// ]]>
</script>

Your code currently looks like this to me:

Code:

<script type="text/javascript">
	// <![CDATA[
	var so = new SWFObject("TESTER.swf", "myMovie", "400", "400", "8", "#0000CC");
	so.write("flashContent");
	so.addParam("quality", "high");
	so.addParam("wmode", "opaque");
	// ]]>
</script>

Using swfObject, your page should validate nicely... see my test page (view source) for examples.

Hth's?
Cheers,
Micky

**invertigo** · Mar 21, 2007 06:51

Hey Micky,

Cheers, you were right! The so.write has to come after the parameters. I knew it was probably something small that was making it not work. It should've been obvious, but I was looking at it for far too long!

The swfObject way is the way I wanted to do it, obviously for the validation, so thanks a lot. All the best to you.

invertigo (unvertigized!)

**nwingate** · Mar 23, 2007 07:36

I'm trying to get my dhtml drop down menus to show up over my Google Adsense flash ads.

I don't control over what flash code Google gives me but I can place code around the Google code or change the way the menu is code.

Is there a way to make this work withough altering the flash code since I have no access to it?