Skip navigation
AdobeUserAudition
Currently Being Moderated

Flash wmode="transparent" still not working in IE

Feb 6, 2013 11:49 AM

Hello there :),

I read many threads about this OLD problem, but saw no real solution at all. The threads are mainly older.

 

A drop down menu is always hidden by a flash movie in IE though wmode is set to transparent. In FF it works just fine!

 

Has anyone in 2013 solved this problem regarding the IE?

 

Thank you very much :).

 
Replies
  • Currently Being Moderated
    Feb 6, 2013 2:01 PM   in reply to AdobeUserAudition

    The solution normally lies in the embedding code.  If you can provide a link to your web page it might provide some info that could lead to solving the problem.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 6, 2013 2:32 PM   in reply to AdobeUserAudition

    I would not begin to call that proper embedding code for Flash content.  It is more likely you need to have that wmode assigned in the page you are linking, not where you have it. 

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 6, 2013 2:39 PM   in reply to AdobeUserAudition

    Do you have any other elements in the background that might be using the wmode = "window" ?  If you have any other swfs that are embedded by default or by the declared wmode="window", then you can't stack a transparent one on top of that.  It will not stack any that use the window mode.  Instead, to save a bit of processing, you can declare the background swf as opaque, which will process a bit faster than trying to declare them both as transparent.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 6, 2013 2:53 PM   in reply to AdobeUserAudition

    Interesting.  I haven't really been working on any stacking swf's in the past few months, but I have worked with them in the past year and did have to support IE.  They are still working.

     

    The methods used to implement them involved placing them in separate div containers on the webpage and then z-sorting the divs.  I remember the window mode creating some issues and that I had to specifically give the flash an id for IE to be able to fully reference it.  Most of the other browsers could locate the swf by the div container, but IE needed the swf itself to also be named.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 6, 2013 3:11 PM   in reply to AdobeUserAudition

    I haven't tested this, but one way might look something like this.  I tend to use swfobject to embed my flash files.  It is also quite a bit easier to do dynamic z-sorting if you use jQuery.

     

    <head>

              <script type='text/javascript' src='js/swfobject.js'></script>

              <script type="text/javascript" type="text/javascript">

         window.onload = function()

        {

            swfobject.embedSWF("myswf.swf", "myDiv", 800, 600, "10.0.0", {}, {}, {wmode: "transparent"}, {id: "mySWF"});

         }

              </script>

    </head>

    <body>

              <div id="myDiv" style="position:absolute; z-index:100;"></div>

              <div id="background" style="position:absolute; z-index:0">I'm in back!</div>

    <body>

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 6, 2013 3:50 PM   in reply to AdobeUserAudition

    style="position:absolute; z-index:100;"

     

    The style settings in the divs, like posted above are actually css styles.  You could pull those out into your css files.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 7, 2013 7:42 AM   in reply to AdobeUserAudition

    I didn't have time to test the code yesterday.  Reverse the order of the divs.

     

    <html>

    <head>

              <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

              <script type='text/javascript' src='js/swfobject.js'></script>

              <script type="text/javascript" type="text/javascript">

                        swfobject.embedSWF("test.swf", "myDiv", "550px", "400px", "10.0.0", {}, {}, {wmode: "transparent"}, {id: "contentSWF", name: "contentSWF"});

              </script>

    </head>

    <body>

              <div id="background" style="position:absolute; z-index:-50">I'm in back!</div>

              <div id="myDiv" style="position:absolute; z-index:100;"></div>

    <body>

    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 7, 2013 9:11 AM   in reply to AdobeUserAudition

    Sorry, I was doing it with a direct swf embed.  If your doing something from youtube, it would be like the following:

    <html>

    <head>

    </head>

    <body>

              <div id="background" style="position:absolute; z-index:-50">I'm in back!</div>

              <div id="myDiv" style="position:absolute; z-index:100;">

                        <iframe width="420" height="315" src="http://www.youtube.com/embed/lLA7dQ-uxR0" frameborder="0" allowfullscreen></iframe>

    </div>

    <body>

    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 7, 2013 9:16 AM   in reply to Rachel-Martin

    If needed, you might need to add the following to the link, depending on the content under &amp;wmode=transparent

     

    Reference link:  http://stackoverflow.com/questions/4050999/youtube-iframe-wmode-issue

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 7, 2013 10:12 AM   in reply to AdobeUserAudition

    Sometimes it is just a trial and error.  The main thing is since I'm not working with your files, I have to mimic your scenario as best I can.  Make sure you give it exact positions when stacking actual videos or swf files to force them to overlap.  I tested this first with just a swf file and now the example is swapped to stack to youtube embeds as examples.

     

    It really shouldn't matter if it is a dropdown or what type of activity, as long as you have the stacking correct.  You can also, generally set the one in back to opaque. I updated the code snippet because this one seemed to read better.

     

    <html>

    <head>

    </head>

    <body>

              <div id="background" style="position:absolute; left:0px; top:0px; z-index:-50">

              <iframe title="YouTube video player" frameborder="0" allowfullscreen="true" allowtransparency="true" width="650px" height="750px" src="http://www.youtube.com/embed/FOHJUrcVdJk?amp;wmode=transparent"></iframe>

              </div>

              <div id="myDiv" style="position:absolute; left:0px; top:0px; z-index:1000;">

              <iframe title="YouTube video player" frameborder="0" allowfullscreen="true" allowtransparency="true" width="500px" height="500px" src="http://www.youtube.com/embed/FOHJUrcVdJk?amp;wmode=transparent"></iframe>

    </div>

    <body>

    </html>

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points