From the code snippet below, I am using DIV to put two elements in the same space (separated by the Z-index). The top element is a video player with a transparent background. (A walk-on spokesperson).
This works fine, except that the client wants controls in the Flash video player, and when the video ends, the player controls remain on the page.
From what I've read, I may be able to accomplish this by using the RemoveChild() Javascript operator triggered by an event from the Flash player. But nothing I've tried works. Is my assumption wrong or is there a better way to remove the controls?
TIA
Steve
Expand|Select|Wrap|Line Numbers
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
- <title>Z-Index Example - Working</title>
- <style type="text/css">
- <!--
- body,td,th {
- font-family: Georgia, Times New Roman, Times, serif;
- }
- div.box1 {
- position: absolute;
- top: 0px; left: 0px;
- z-index: 10;}
- div.box2 {
- position: absolute;
- top: 0px; left: 0px;
- z-index: 20;}
- -->
- </style></head>
- <body>
- <!-- This is random text only to demonstrate that the video player is truly transparent. -->
- <div class="box1">This is the lower layer because the z-index is lower than the z-index of the video.
- <br>The English language is a tricky devil to wrap your head around sometimes. It's a hard language to
- learn for non-native speakers, and it has more irregularities than an old-folks home. With that in mind,
- ... several lines of meaningless text deleted ...
- <br>
- </div>
- <div class="box2">
- <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="720" height="480">
- <param name="movie" value="EnergyStar.swf">
- <param name="quality" value="high">
- <param name="allowScriptAccess" value="sameDomain" />
- <param name="allowFullScreen" value="True" />
- <param name="wmode" value="transparent">
- <embed src="EnergyStar.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="720" height="480" allowScriptAccess="sameDomain" allowFullScreen="True" wmode="transparent">
- </embed>
- </object>
- </div>
- </body>
- </html>