Flash video playing on top of everything else in IE7
- by Brett
Hi everyone,
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> – </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!
