Flash video playing on top of everything else in IE7_问答_开发者

I've been spending hours now reading up on IE7's issue with rendering Flash content on top of other elements, particularly navigation menus (this is often a problem with dropdown menus and Flash ad banners, for example). I've tried a few of the suggested solutions but none have worked for me so far. I'll do my best to explain the circumstances, and would appreciate any advice in the matter!

Update

At Mercator's request, I am providing a large code-sample to assist in any advice you might have. Consider the HTML below:

<body>
  <div id="page-wrap">
    <div id="content-wrap">
      <div id="main">
        <h1>Page Title</h1>
        <p>Paragraph text before video.</p>
        <div class="video-container">
          <script type="text/javascript">
          AC_FL_RunContent('id','player','name','player','width','480','height','294','src','player','allowscriptaccess','always','allowfullscreen','true','flashvars','file=mp4/VIDEO_FILE.mp4','movie','player' ); //end AC code
          </script>
          <noscript>
            <object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="480" height="294">
              <param name="wmode" value="transparent" />
              <param name="movie" value="player.swf" />
              <param name="allowfullscreen" value="true" />
              <param name="allowscriptaccess" value="always" />
              <param name="flashvars" value="file=mp4/VIDEO_FILE.mp4" 开发者_开发百科/>
                <embed
                  wmode="transparent"
                  type="application/x-shockwave-flash"
                  id="player2"
                  name="player2"
                  src="player.swf" 
                  width="480" 
                  height="294"
                  allowscriptaccess="always" 
                  allowfullscreen="true"
                  flashvars="file=mp4/VIDEO_FILE.mp4" 
                ></embed>
            </object>
          </noscript>
        </div>
        <p>Paragraph after video.</p>               
      </div><!-- end main -->
      <div id="subContent">
        <p>Sub-content.</p>
      </div><!-- end subContent -->
      <div id="content-clear"></div>
    </div><!-- end content-wrap -->
  </div><!-- end page-wrap -->
  <div id="footpanel">
    <ul id="mainpanel">
      <li id="panel-link"><a href="#"><span class="icon"></span>Panel Link</a>
    <div class="subpanel">
      <h3><span> &ndash; </span>Panel Link</h3>
      <ul>
        <li><p>Revealed content</p></li>
          </ul>
        </div>
      </li>
    </ul>
  </div> <!-- END footpanel -->
</body>

Below are the non-presentational CSS selectors that apply to the divs above:

body { /*no positioning styles applied */ }
#page-wrap { width: 100%; }
  #content-wrap { width: 960px; margin 0 auto; }
    #main { float: left; width: 573px; }
      .video-container { position: relative; width: 480px; z-index: 1; }
    #sub { float: left; width: 347px; }
    #content-clear { clear: both; }
#foot-panel { position: fixed; width: 94%; bottom: 0; left: 0; z-index: 3000; }
  ul#main-panel { float: left; }

The footpanel uses jQuery-powered flyout menus, if that provides any further context. These menus have z-indexes in the 300X range to appear above the footpanel.

The Flash in question is JW player playing a flash video or mp4. Currently, the object and embed tags are inside a container div.

My understanding of previous solutions was that the combination of the param changes and the positioning/z-index change on the container div should have resolved the issue. Alas, it is not so. The player resides on top of the footpanel.

Other information that may or may not be helpful is that the page is XHTML 1.0 Transitional and that Dreamweaver reports 1 error in the HTML code: <embed> is not in the XHTML 1.0 specification. This fact does not prevent the video from being viewed in any browser tested, and the page still displays correctly in FF.

Thanks in advance!

I know I'm late to this game here but I thought I would throw out there that placing wmode="transparent" inside your embed tag assists with this issue as it somehow forces Flash to obey z-index (again, I use the word "somehow" because there's sparse documentation as to why this is--at least from my experience, there's sparse documentation).

So anyway, place that wmode="transparent" inside your embed and then remove z-index and positioning from the actual div containing the video.

That SHOULD work. If it does not, then it may be a different issue because I had the EXACT same problem just now and doing these 2 things fixed it for me.

I hope that helps.

Oh, and you might consider checking this out (it helped me big time): http://manisheriar.com/blog/flash_objects_and_z_index

Casey J. Burk

Have you tried removing position: relative and z-index: 1 from the video-container?

Those properties really only increase the problems, not reduce them. I thought you might've needed them because there was lots of positioning going on in the rest of the page, but that doesn't seem to be the case.