For example, a dropdown menu going “behind” a flash movie, or staying on top of a lightbox layover.
Try This #1
Add this to the Flash embed code:
<param name="wmode" value="transparent">
Try This #2
Make sure the element that is supposed to be on top has positioning (fixed, relative, or absolute) and a z-index value higher than the Flash object.
Thanks i was wondering how i would get flash to be behind. Very helpful.
helpful trick. thanks
Great website design Chris and also great tips!
Love your website! =)
Tonya in Stafford, VA, USA
near Washington DC
I try to handle this with positioning but this is good to know. Thanks.
thx, i find your tutorial via google. i am working to solve flash problem right now. good job
thanks, this worked great.
Great CSS code tips! Thank you so much!
this code not working in ie7
The code doesn’t work for me I’ve tried it in all the browsers I could think of except IE 9 because I am using windows xp still but it doesn’t work on firefox opera chrome or safari, and i treid it with IE8
Thank you. I changed the position to relative and set the z-index values and it resolved this issue!
Jared you are a genious. Something so simple. I tried many different solutions, e.g. wmode, etc and it didn’t work. But your solution by adding position to relative worked.. Thanks again.
I attempted this, sadly the flash videos from YouTube still float above my header bar. Ive even given the header an absurd z-index with out any change. :(
It won;t work and spent whole week researching for IE. In transparent your background will disappear unless the background is the same as the movie. Try this it worked for me
see a demo here: http://www.vrnet.co.ke/atbltd
Cheers have fun !
This worked for me better than the blogs solution. The main values to change are the values of wmode and menu to opaque and false, respectively. +1 to you sir for this workaround without the hassle of adding more lines to the css.
I am having issue with youtube and chrome.. I have a header fixed at the top, so that the content below scrolls behind it, but then when the youtube player is scrolled underneath the header the header background image re-positions itself and adds spacing. But this only happens when i use the background position of fixed.
any ideas how to prevent this
I tried all the possible ways I am not getting the solution. The drop down menu is getting hidden behind the flash object in chrome.
This helped me:
Keep Flash Behind Other Elements while Flash is coming from other site? can we fix it?
I want to show a previous and next div over flash content which is opening in iframe.I have tried all the wmode=opaque or wmode=transparent or wmode=window, but fail to work in IE8.
I cant add because flash content is coming from other site.I am loading the other site in iframe.
Please help me ASAP.
Thanks all! If anyone else (like me) was having problems, also be sure to check out Lauris’ comment.
This is amazing!
Worked for me! Thanks, more power!
Wicked thanks man, love easy wins.
Or… if an iFrame
emphasis on the
ah, someone already posted that… suppose I should have read a while longer.
Thanks man. This worked great!!
Thank You….changing the wmode param value to transparent worked for me
<EMBED src="/FlashAnimation.swf" type="application/x-shockwave-flash" wMode="Transparent">