I want to show a quicktime movie with OBJECT in the
background and some html (DIV/IFRAME) in front of it.
I used style="z-order:1000" to move the html up front.
The DIV does not seem to work, neither MSIE nor Firefox.
The IFRAME renders fine in MSIE but Firefox 1.0.4 does
not render it correctly:
  • it seems to get rendered (you can see the content
    when moving the scrollbar of the IFRAME)
  • the movie overwrites the content of the IFRAME
  • if I put a quicktime movie into the IFRAME it gets
    displayed "on top" but flickers (play around with the
    "goto" button, sometimes it gets almost stable)

I've tried disabling video acceleration without effect.
BTW: Opera puts the OBJECT in front of any IFRAME w/o flicker.
See sample code below.

Related thread: div in front of flash

Any help appreciated, even if it's a link to Bugzilla ;-)
josch

TEST.HTML
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TEST</title>
</head>

<body>

<OBJECT style="z-order:-1000;" 
     id="myobj" CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"  
     WIDTH="720" HEIGHT="576" type="video/quicktime"
     CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
  <PARAM NAME="src" VALUE="http://movies.apple.com/movies/wb/batman_begins/batman_begins_240.mov">
  <PARAM NAME="autoplay" VALUE="true"/>
  <param NAME="wmode" VALUE="transparent"/>     <!-- for flash?! -->
  <PARAM NAME="starttime" VALUE="00:07:00.0"/>
  <PARAM NAME="endtime" VALUE="01:10:00.0"/>
  <PARAM NAME="loop" VALUE="true" />
  <PARAM NAME="bgcolor" VALUE="000000" />
  <PARAM name="scale" value="tofit" />
  <PARAM NAME="controller" VALUE="false"/>

  <EMBED style="z-order:-1000;" 
     name="myobj" 
     SRC="http://movies.apple.com/movies/wb/batman_begins/batman_begins_240.mov" 
     WIDTH="720" HEIGHT="576"
     CONTROLLER="false"
     cache="true"
     starttime="00:07:00.0"
     endtime="01:10:00.0"
     BGCOLOR="000000" BORDER="0" 
     AUTOPLAY="true" loop="true" scale="tofit"
     BGCOLOR="000000" BORDER="0" PLUGINSPAGE="http://www.apple.com/quicktime/download/indext.html">
  </EMBED>
</OBJECT>

<br/>

<button onClick="document.myobj.Stop();">Stop</button>
<button onClick="document.myobj.Play();">Play</button>
<button onClick="document.myobj.SetTime(10000);">Goto 10000</button>

<button onClick="this.innerHTML = String(document.myobj.GetTime());">GetTime()</button>


<div 
  style="position:absolute; left:100px; top:100px; 
     font-family:stack; font-size:48px; font-color:green; font-weight:bold;
     background-color:gray; border:3px solid yellow;
     z-index:100;"
 >THIS z-index:100 SHOULD APPEAR ON TOP</div>

<iframe 
  style="position:absolute; left:650px; top:300px; 
     font-family:stack; font-size:48px; font-color:green; font-weight:bold;
     background-color:transparent; border:3px solid yellow;
     z-index:1000;"
  src="myobj.html"
  scrolling="yes" marginheight="0" marginwidth="0" frameborder="0"
>
  THIS iframe SHOULD APPEAR ON TOP
</iframe>

<iframe 
  style="position:absolute; left:400px; top:380px; height:300px;
     font-family:stack; font-size:48px; font-color:green; font-weight:bold;
     background-color:transparent; border:3px solid yellow;
     z-index:10000;"
  src="ontop.html"
  scrolling="yes" marginheight="0" marginwidth="0" frameborder="0"
>
  THIS iframe SHOULD APPEAR ON TOP
</iframe>


<object 
  style="position:absolute; left:500px; top:400px; 
     font-family:stack; font-size:48px; font-color:green; font-weight:bold;
     background-color:transparent; border:3px solid yellow;
     z-index:100000;"
  src="ontop.html"
>
  THIS object SHOULD APPEAR ON TOP
</object>


<!-- don't know how to remove the window title bar
<script language="javascript">
  document.open("ontop.html", "on-top-window", 
    "width=310,height=400,left=200,top=400,toolbar=no,resizable=no,status=no,menubar=no,location=no,scrollbars=no,dependent=yes"
  );
</script>
-->

</body>
</html>
MYOBJ.HTML
Code:
<html>
<body>

<OBJECT 
     id="myobj" CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"  
     WIDTH="180" HEIGHT="144" type="video/quicktime"
     CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
  <PARAM NAME="src" VALUE="http://movies.apple.com/movies/wb/batman_begins/batman_begins_240.mov">
  <PARAM NAME="autoplay" VALUE="true"/>
  <param NAME="wmode" VALUE="transparent"/>     <!-- for flash?! -->
  <PARAM NAME="starttime" VALUE="00:07:00.0"/>
  <PARAM NAME="endtime" VALUE="01:10:00.0"/>
  <PARAM NAME="loop" VALUE="true" />
  <PARAM NAME="bgcolor" VALUE="000000" />
  <PARAM name="scale" value="aspect" />
  <PARAM NAME="controller" VALUE="false"/>

  <EMBED style="z-order:-1000;" 
     name="myobj" 
     SRC="http://movies.apple.com/movies/wb/batman_begins/batman_begins_240.mov" 
     WIDTH="180" HEIGHT="144"
     CONTROLLER="false"
     cache="true"
     starttime="00:07:00.0"
     endtime="01:10:00.0"
     BGCOLOR="000000" BORDER="0" 
     AUTOPLAY="true" loop="true" scale="aspect"
     BGCOLOR="000000" BORDER="0" PLUGINSPAGE="http://www.apple.com/quicktime/download/indext.html">
  </EMBED>
</OBJECT>

<br/>

<button onClick="document.myobj.Stop();">Stop</button>
<button onClick="document.myobj.Play();">Play</button>
<button onClick="document.myobj.SetTime(10000);">Goto 10000</button>

<button onClick="this.innerHTML = String(document.myobj.GetTime());">GetTime()</button>

</body>
</html>
ONTOP.HTML
Code:
<html>
<body>
<h1>ontop.html SHOULD APPEAR ON TOP</h1>
<p>
  We need a means to place content on top of
  the quicktime-object. Actually it does in
  MSIE and it stays there.
</p>
</body>
</html>