Flash video playing on top of everything else in IE7
I spent a few hours reading IE7 rendering Flash content on top of other elements, in particular navigation menus (for example, this is often a problem with pop-up menus and banners in Flash ads). I tried several suggested solutions but none worked so far. I will do my best to explain the circumstances, and would appreciate any advice on this matter!
Update
Upon Mercator's request, I provide a large sample code to help with 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 unrepresented CSS selectors that apply to the above divs:
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-enabled dropdown menus if this provides any additional context. These menus have z-indexes in the 300X range to appear above the leg bar.
The Flash is a JW player that plays flash video or mp4. Currently, object tags and inserts are inside a div container.
My understanding of the previous solutions was that a combination of parameter changes and position / z-index change in the container div should have solved the problem. Alas, this is not the case. The player is on top of the panel.
Other information that may or may not be helpful is that the XHTML 1.0 Transitional page and that Dreamweaver reports error 1 in HTML: <embed> is not part of the XHTML 1.0 specification. This fact does not interfere with watching the video in any browser, and the page still renders correctly in FF.
Thanks in advance!
source to share
I know I am late to this game here, but I thought I would pick there that placing wmode = "transparent" inside your embed tag helps with this problem as it somehow makes Flash obey the z-index (again , I use the word "somehow" because there is sparse documentation as to why this is - at least in my experience, sparse documentation is there).
Either way, put wmode = "transparent" inside your attachment and then remove the z-index and positioning from the actual div containing the video.
SHOULD work. If it is not, then it might be a different problem because I had the EXACT same problem just now, and these 2 things fixed it for me.
I hope this helps.
Oh, and you could consider this (it helped me a lot): http://manisheriar.com/blog/flash_objects_and_z_index
Casey J. Burke
source to share
Have you tried to remove to position: relative
and z-index: 1
from video-container
?
These properties really only increase problems, not diminish them. I thought you might have needed them because there was a lot of positioning in the rest of the page, but that doesn't seem to be the case.
source to share