swfObject help when placing a div over flash

posted in Flash Tutorials

Working on a new website for a client right now and ran into a problem.

The logo looked a little blurry when animated in the flash header, so I decided the best solution would be to place a floating div over the flash header.

If you’re not sure how to do this yet, here’s how:

1. In your code for the flash file, add the following:

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

2. In the “embed” area, you need to add this:

wmode=”transparent”

Add your div with absolute positioning and off you go.

So, this works all well and good when you aren’t using the swfObject to embed the flash and get rid of the nasty flash activation box that surrounds all flash files in IE.

I searched on Google for a while this morning but could not find an example of someone having a problem with this.
So, I started to think creatively. I’m not a programmer at all and I do not know much javascript. But I was able to make educated decisions on what I do know.

When using the swfObject, the javascript on the same page as your flash file looks something like this:


var fObj = new FlashObject("example.swf", "header", "778", "527", 7, "#FFFFFF");fObj.addParam("base",".");

fObj.addParam("menu","false"); fObj.write("headerflash");

Using this javascript that comes with the swfObject embed code,and the external js file, will stop your div from appearing over the flash file now. In essence, steps 1 and 2 from above are not working now because of this js added to remove the activation box on the flash file.

How do we fix this? That’s what I was having trouble with for a few minutes. I couldn’t figure out why my div was now behind the flash file.

Then, I realized what needs to be added to the JS that is comes with the swfObject.
Currently, the new javascript that we added from the box above is writing to the flash element what parameters and values are to be read. So, we have to add the new parameter we added to the flash code when we wanted the div to float over the flash.

Simply, add this to the JS from the box above:

fObj.addParam(“wmode”, “transparent”);

This now tells the JS to write this parameter also as it is already included in our first two steps we did to get the div to float over it.

Not knowing much javascript, that’s what it means to me anyways! Some JS experts out there may be able to explain what is going on here a lot better, but it works so I am happy!

Subscribe via RSS or email. You can also follow me on Twitter if you like.
51 added so far, add yours!
  1. Stu Goymer says:

    Hey Brian – until I found your post I nearly gave up on trying to do this.

    Thanks for putting me in the right direction, your method above works fine.

    I am working on a large project for a corporate client and I wanted to use a search form over a Flash banner. Wasn’t hopeful it would work cross browser (or at all).

    I did another search “swfObject embed code” and came across the new SwiftObject 2.0 coding. It solves the IE flash activation box issue, is W3c , detects versions and offers alternative HTML if no Flash.

    You can even use a code generator. just remember to specify your Flash ‘parameter’ as above ()

    My code looks like this

    script type=”text/javascript” src=”${row2_assets_base}scripts/swfobject.js”>

    var flashvars = {};
    var params = {};
    params.wmode = “transparent”;
    var attributes = {};
    swfobject.embedSWF(“${row2_assets_base}flash/intro.swf”, “introtext”, “960″, “250″, “9.0.0″, false, flashvars, params, attributes);

    The links you should check out:

    http://code.google.com/p/swfobject/
    http://www.swffix.org/swfobject/generator/

  2. Marcus says:

    Wow, thank you guys, I had the same problem when placing a div over flash content. If something was animated, the content of the div disappeard in firefox 2. I still don’t really understand why wmode is the problem here because it only makes the swf transparent..
    But the main thing is, it works and saved me much time:)

  3. Pygmees says:

    Hi
    it seems that google chrome doesnt handle swfobject: all my flash apps using swfobject are not showing while those without work perfectly…

  4. Brian Yerkes says:

    Thanks Stu! Good info

    Marcus, glad you got it working

    Pygmees, I checked that out and you’re right. Embedded links are not working in the flash file if you have the swfobject added….that’s not good.

  5. Waqas Ahmed says:

    Hi

    I was having the same problem, flash movie supressing any div or dhtml menus, but the solution posted by Stu Goymer did work for.

    Thank you..

    <script type=”text/javascript” src=”${row2_assets_base}

    var flashvars = {};
    var params = {};
    params.wmode = “transparent”;
    var attributes = {};
    swfobject.embedSWF(”${row2_assets_base}flash/intro.swf”, “introtext”, “960″, “250″, “9.0.0″, false, flashvars, params, attributes);

  6. James says:

    Hi, I’m having difficulty with this method, I did the swfobject method from their documentation and followed those links but i still can’t manage to get my text div to float above, could you explain where you put the code mentioned above, i really need this on my site, maybe show me the whole code

  7. Brian Yerkes says:

    Hi James,

    You don’t need to use the SWFobject anymore.

    Go to fortmyersbeach.org and look at the source. You will see the code for the flash file is much simpler now. And I simply floated a div over on top of the flash movie.

  8. james says:

    Also what do you mean by “embed area”, thx in advance

  9. james says:

    thanks, hadn’t refreshed in a while, got it to work, amazing

  10. Joao says:

    Hello

    I am having problems with my google ads.. they won’t show
    and i am using a flash based website with this code:

    var so = new SWFObject(“imagevue.swf”, “imagevue”, “100%”, “100%”, “6″, “#ffffff”);
    so.addVariable(“globalpath”, “”);
    so.addVariable(“textcol”, “”);
    so.addVariable(“configfile”, “”);

    so.write(“imagevue”);

    Please could someone help me out?
    Thank you

  11. Brian Yerkes says:

    Hi Joao,

    Sorry, I can’t help you out there. Hopefully someone will stumble across this that knows. Try a forum also where the serious flash programmers roam :)

    Brian Yerkes’s last blog post..Website Alignment – How Do You Like It

  12. Aaron says:

    Hi, i’m workin on my hompepage and have tried a couple different methods to get my .swf to center the page and havent had any success. any suggestions please? thank you in advance.

  13. Renee says:

    mwah!! love u for this tutorial this was the best thing that happened to me. i was ripping my hair out till i googled the problem and found your simple solution

    Thanks again,
    Renee

  14. Stephan says:

    Perfect, thank you!!

  15. Silverhawk says:

    OMFG.. Thank-you Thank-you Thank-you!!!!.. I was beginning to pull my hair out, and just couldn’t understand why when I was using the same line of code as everyone else and it still wouldn’t work for me… then i visited your fortmyersbeach.org site and just copied out the exact embed code replacing my swf file for yours and like magic it worked!!

    UGHHH! thanks sooo much!!

  16. angga hendra says:

    wow, thanks 4 tutorial..
    I search this..

  17. Boom goes the dynamite!

  18. Thanks a lot :) really appreciated it, I knew it could be done but never thought to check in the js file as my skills in JS arnt all that, great find.

  19. Kevin Hannon says:

    I had a unique situation where I had to use the swfobject.embedSWF embed method coupled with the external swfobject.js external file instead of embed method Dreamweaver would put into your code when you insert a Flash SWF, and I just wanted to share the code that worked worked for me incase anyone is searching this for a solution like myself.

    function onItemSelect(name) {
    }

    function onItemClick(name) {
    }

    swfobject.embedSWF(“YOUR_SWF_NAME_HERE.swf”, “YOUR_DIV”, “400″, “400″, “9″, null, {wmode:”transparent”});

    I’m not sure when the functions refer to or if they are necessary, but note how the wmode transparent is written…

    Hope this helps.

    Kevin

  20. Contemporary says:

    Hello, I am having difficulty as well. Its quite odd, however, though my div appears to function well over the active flash content in all browsers when played on a mac. My div does not display in any browser on PC. It is very strange. I am assuming that there is something wrong with my code. I have checked browser compatibility in DW and rechecked my code. I am stumped. I would assume that my code is rather messy, however, despite that I do get things to work. Though it is a first for me that have MAC (in) / PC (out) ??? There must be something I am overlooking, especially for IE, the problem is in the JS. Any help would be appreciated. The div is there on pc, its being covered up by the background flash content.

    I can provide details if this thread is still active.

  21. Alecu says:

    It works, thanks.

  22. Jes says:

    Thanks! This really helped me out quite a bit. I am using an Inline survey and it was appearing behind our site Trailer video. Not anymore! Thanks again! :)

  23. RushO says:

    Hi Brian,

    Could u help me to solve my problem here. I have made menu background transparent but when I place them with DIV in my html page i got this problem. Have a look at this link

    http://www.creativerush.com.au/test/1.html

    and if u could explain to me where did i went wrong.

    Thanks you n looking forward for your response.

    Cheers,

    RushO

  24. brianyerkes says:

    Hi Rusho, looks like the div containing the flash has a z-index higher than the div containing the text. This will make your flash file overlay on top of the text, even if it is a drop down menu in flash.

    You will need to use some actionscript or something to fix the flash file probably. Sorry, but I don’t have enough knowledge with action script to help. Good Luck

  25. stebal4 says:

    That is a fantastic post, this problem in FF3 was driving me mad, thanks!

    Simply added:
    var params = {
    wmode: “transparent”
    };

  26. chuck says:

    I am on a pc but test it in IE6, IE8, FF3, Safari4.
    It works perfectly except in Safari. Any ideas as to why Safari is not cooperating?
    http://www.highdefinitionhair.com/flash/home.html

    Thanks in advance.

  27. Karlson says:

    Thanks for the tutorial!!! It was a big help. I do have a question about the Z-index. Should this work with out the use of the Z-index? I could only get it to work if I used the Z-index.

  28. Derek says:

    Thanks a ton!!! Your example helped when others didn’t and were more complicated. Your solution was simple and to the point and shows true expertise.

    Thanks so much

  29. ColtonCat says:

    Just a quick note, reading Brian’s post, I notice he is dealing with swfObject 1.5, this has been superseded by swfObject 2.2 now, which is why so many of the comments have a different syntax. 2.2 does not support the fObj = new syntax.

    swfObject 2.x now has a Google Code home, with lots of info: swfObject 2 on Google Code

  30. Abhay says:

    Thanks man, that article is excellently discussed.
    It solved all the problems i was facing regarding flash.
    You made me a hero…. thanks…

  31. Un-Googleable says:

    Yes! Thank you!

  32. Animesh says:

    Thanks owner
    wmode=”transparent” this code very helpful it save my lots of time

  33. saira says:

    Thanks for this
    see flash professional and higher page rank tutorials see this link
    http://www.tutorials99.com

  34. Nok says:

    Thanks

    After my dropdown menu are behide swfOblect. Then I add this code

    so.addParam(“wmode”, “transparent”);

    in

    var so = new SWFObject(‘slideshow.swf’,'mpl’,’310′,’310′,’8′);
    so.addParam(‘allowscriptaccess’,'always’);
    so.addParam(‘allowfullscreen’,'true’);
    so.addVariable(‘height’,’310′);
    so.addVariable(‘width’,’310′);
    so.addParam(“wmode”, “transparent”);
    so.write(‘player’);

    After It’s work.

  35. Danny says:

    Until I found your post I was sooo annoyed. Spend two nights up until 6 AM trying to figure this out. Thanks so much!

  36. Cristopher says:

    This works great in all browsers except on Gecko engines like safari and Google Chrome does anybody know why and how to fix it?

  37. Damodharan says:

    This works good in static contents. I want the same with dynamically. I wrote the following codes,

    var params1 = {movie:”Flash/SlideShowPlayer.swf?xml_path=Flash/SlideShowDetails.aspx?FromPage=MyPage&Dat=”+ Date.parse(new Date()),quality:”high”, wmode: “transparent”, allowscriptaccess: “always”, defer: “defer”};
    swfobject.embedSWF(“Flash/SlideShowPlayer.swf?xml_path=Flash/SlideShowDetails.aspx?FromPage=MyPage&Dat=”+ Date.parse(new Date()), “divSlideShow”, “485px”, “420px”, “7.0.0″, “assets/expressInstall.swf”,”",params1,”");

    The “SlideshowDetails.aspx” page dynamically generates the xml input. It doesn’t work after update anything

  38. StevenM says:

    @Cristopher + everyone else -

    This method is old and outdated. Please do not use it. Refer to a tutorial that deals with the modern version of the script. IE- http://nooshu.com/swfobject-2-2-and-wmode-transparent/

  39. Damodahran says:

    Thank you StevenM.

    I got the solution from your reference link.

  40. Andy says:

    Thank you so much ..worked like a charm

  41. jamesedwardclare@gmail.com says:

    hi, this looks great just what i need, but im a bit confused as to where i need to add the code, in flash or in dreamweaver embedded.

  42. Tim says:

    You have no idea how totally awesome I think you are right about now…. hours of frustration disappeared in a second. Thank you so much!

  43. Miguel Nunes says:

    Ha! Finally found a solution, thanks !

  44. Angie says:

    Thank you so much for this! It’s exactly what I needed! Your solution worked for me.

  45. Tanya says:

    Hi,

    I do not use transparent wmode, as most of the sites these days should be ipad/iphone compatible, thus i should have an option for these ones that do not play flash. So, i keep static background image under each flash, so something will display on the mobile devices.

    Maybe z-index should work to resolve this better? (I didn’t try it yet though ;)

  46. Andrew says:

    Just wanted to add yet another ‘Thank-you!!’ comment as this method helped me after a lot of wasted time searching. Cheers for making this available for us all.

  47. Gobinathan says:

    Thanks it works!

  48. Radomir says:

    This a perfect solution to displaying a DIV over a Flash object, or Flash video form Youtube.

    You saved my day! A big thank you for sharing this solution with the rest of us.

    I’ve been looking for a long time, and found many suggestions that don’t work as claimed. Finally, I found you. Cheers!

    One small suggestion: to make implementation perfectly clear to the rest of designer like me, who are not programmers by any means, maybe you could share this example of actual code from my site. Feel free to clean it as you see fit:

  49. vtdesigner says:

    Thank you very much for this! It worked perfectly.

  50. violetlobster says:

    I had to enter the wmode parameter in *three places* in *three ways*, as I inserted the SWF object via Dreamweaver CS3. It wouldn’t work in IE until I’d fixed the Javascript method as well:

    1 (for Javascript method) = ‘wmode’,'transparent’

    2 (for method)=

    3 (for method)= wmode=”transparent”

    See full example:

    AC_FL_RunContent( ‘codebase’,'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0′,’width’,’240′,’height’,’262′,’title’,'client testimonials’,'src’,'images/quotes’,'quality’,'high’,'pluginspage’,'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash’,'movie’,'images/quotes’, ‘wmode’, ‘transparent’ ); //end AC code