Wmode=transparent or opaque? need to pop up a div to be on top of swf

Content
1

I had a popping up div that was under a Flash swf embed object… but i need it to be on top of the swf instead. so i found that a suggestion was to use wmode=“transparent” (say, if it is <embed>).

another suggestion says wmode=“transparent” takes too much CPU time, and using wmode=“opaque” solves the same problem.

is that true? I can’t find much documentation on wmode on the web… is it true that “opaque” will make the swf object behave like any other HTML elements, and then “transparent” will actually make any HTML element under the swf to show through? and if that’s the case, how come the white background of <body> did not show through?

the name is a bit strange as opaque usually means semi-transparent. thanks.

2

for example, the following code act the same whether it is wmode=“transparent” or wmode=“opaque”


<div>
	<embed wmode="transparent" src="http://www.youtube.com/v/MN0XWcj_L6o&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
	<div style="width:200px;height:300px;background:orange;margin-top:-150px;"></div>
</div>
3

i think this page explains it:

a nice demo here:

window mode, the default. will cover up any other HTML element.

opaque mode: the flash will be like any other HTML element, can be covered up or can cover up something else.

transparent mode: like opaque, but with the additional property that the transparent region of the flash content will show the HTML element that the flash is covering up.

as a result, many people use wmode=“transparent” to make other HTML element be able to cover up the flash and it is not needed. “opaque” is better because it is faster (when no transparent content need to show through).

4

also interesting to note is that the following code won’t work:

		<div>
			<embed  id="embedVideo" wmode="window" src="http://www.youtube.com/v/MN0XWcj_L6o&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
			<div style="width:200px;height:300px;background:orange;position:relative;top:-150px"></div>
			<a href="#" onclick="document.getElementById('embedVideo').wmode = 'opaque';return false;">click me</a>
		</div>

the other way around won’t work either – if it was “opaque” and the onclick sets it to “window” or to “”. if i change it to change the width to 800 then it will take effect, but setting wmode won’t have effect. i wonder why? thanks.

5

i posted on Adobe’s forum… seems like it is the case:

it seems like

  1. wmode=“opaque” and wmode=“transparent” are the same except transparent allows any transparent flash content to show any HTML content underneath it.

  2. Otherwise, opaque and transparent are the same – they both allow HTML element to be on top of the flash object.

  3. The default wmode=“window” and this value will make the flash object to be on top of any other HTML element.

  4. transparent is slower than opaque, because it needs to process the transparent feature. as a result, most flash objects only need to use wmode=“opaque” instead of transparent.

Can any Flash guru confirm that the above is true? thanks.

  1. Apr 20, 2009 7:37 PM in response to: winterheat
    Re: difference between wmode=“opaque” and wmode=“transparent”
    You pretty much hit the nail on the head there, yes.