This Post Idea was given by my good friend : Hiren Pandya
In my Ongoing Project, there was a problem with placing the content, div or a menu over a flash file. Let me make you see what was the exact problem.
In above picture you can see the red circle where the drop down menu is open and is falling behind the Flash Player with an video streaming.
Some of you may think that it can be solved with simple CSS z-index property … but it will not work here. So its not a CSS problem of a layout fix.
Assuming that you know how to embed a video file in a html and if not here is the code
This object of flash needs to have two more lines of code which i will specify in RED
<object id="player" classid="3540000" name="player" width="300" height="200"> <param name="movie" value="player-viral.swf" /> <param name="wmode" value="transparent" /> <param name="allowfullscreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="flashvars" value="URL" /> <embed type="application/x-shockwave-flash" id="player2" name="player2" src="player-viral.swf" width="300" height="200" wmode="transparent" allowscriptaccess="always" allowfullscreen="true" flashvars="file=URL" /> </object>
I think you may have understood that the wmode with transparent value will keep the video flash object a transparent object can that solved the simple problem and now the image below shows what the menu should have looked at the first place i.e the requirement.
This method works well in all major A-grade browsers. And the best part is that it also supports IE6