Adding Transparency to SWFObjects
I was asked to add a lot of Flash to a website recently. This website was a content-managed solution (our own content management solution), so I thought "hey, instead of them asking me to add flash movies everywhere, why not allow them to do so, very easily?" So, I used Geoff Stearns' SWFObject and packaged it up so that the user would just need to point to which file they wanted it to play, the width and the height of the video. Worked pretty well. The SWFObject removes the box around the Flash and the "alt" text that prompts you to click the Flash or press spacebar to activate and use the video. Then, the client wanted to put a Flash object directly below the main menu, which had drop downs.
The drop down menus hovered BEHIND the Flash object! Needless to say, this was unacceptable. I Googled it for a while, and found that most people who had this problem were abandoning SWFObject and going with custom code. I thought that was silly. So, I figured out the fix (you need to tell it to be transparent) and decided to jump into Geoff's code. It was a little difficult to navigate around, but when you find the areas to change, it's pretty easy to figure out what to do.
You have two things you have to do. 1) Go into line 60 of the swfobject.js (I have version 1.4), which looks like this:
_19="<embed type=\"application/x-shockwave-flash\" src=\""+this.getAttribute("swf")+"\" width=\""+this.getAttribute("width")+"\" height=\""+this.getAttribute("height")+"\"";
And add this attribute to the embed object:
wmode='transparent'
For a finished product of:
_19="<embed wmode='transparent' type=\"application/x-shockwave-flash\" src=\""+this.getAttribute("swf")+"\" width=\""+this.getAttribute("width")+"\" height=\""+this.getAttribute("height")+"\"";
After line 69, which should look like this:
_19="<object id=\""+this.getAttribute("id")+"\" classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" width=\""+this.getAttribute("width")+"\" height=\""+this.getAttribute("height")+"\">";
Add this line:
_19+="<param name='wmode' value='transparent' />";
That's it!
Now, if that's something you'll only be doing once, and you don't want your other instances of SWFObject to be transparent, then don't change the JavaScript code! When creating the SWFObject, you would normally see code like this:
var so = new SWFObject('someurl', 'mymovie', 'somewidth', 'someheight', '7', '');
so.write('mydiv
');
If you want just one instance (or a few instances) to have transparency, just add this line of JavaScript before the write statement:
so.addParam('wmode', 'transparent');