Engage on Facebook Engage on Twitter Engage on LinkedIn Engage on GitHub

Overlapping Embedded Flash Elements

By Brian Dukes

We've recently noticed on a number of our website projects that we had elements that we expected and wanted to display on top of embedded Flash elements, but the Flash always overlapped them.  In a couple of sites, the Solpart menu was being hidden by a Flash banner.  In another, we were using the ASP.NET AJAX ModalPopup control, which grays-out the background when the popup is triggered.  However, the Flash elements were not grayed-out.  It looked especially bad because we were replacing header text with Flash using sIFR, so, not only was there a non-gray Flash banner at the top of the page, but blocks of Flash text throughout.  It was unacceptable.  I was tasked with scouring the internet to seek the advice someone who had already fixed the problem.

After a few hours of mostly fruitless searches, I stumbled upon a blog post that seemed to address the issue in an intelligent manner (rather than all of the tips I had found before that didn't work).  To paraphrase, we needed to add an additional parameter when we rendered the Flash so that it would let other elements overlay it.  Namely, inside the OBJECT tag, we added the element <PARAM NAME="wmode" VALUE="transparent">, and inside the EMBED tag, we added the attribute wmode="transparent" (remember to add both if you have both).  This fixed the banner, but sIFR is rendered on the fly.  Examining the documentation, we found, fortunately, that sIFR already considered this.  In the calls to sIFR.replaceElement, you can add a parameter named sWmode, which you can set to transparent.  All of a sudden, everything looked right!

Now, the caveats. 

  • The blog post mentioned above talks about having to add a style to set the z-index of the Flash element, in addition to changing the wmode, but we didn't have to do that.  You might.
  • The sIFR documentation mentions problems rendering Flash movies with the wmode parameter set.  We aren't seeing this problem yet, it may show up when we test in some older browsers.  Make sure that your Flash object still works in older/Mozilla browsers.
  • The wmode also can be set to opaque, which should also work, but will, I assume, change how the background of your Flash element is rendered.  The default setting is window.
  • Adobe talks about this issue here, and its supported browsers here.
Check out our free guide, "Six Issues to Avoid When Upgrading to DNN 8" Download