div layer over a flash movie help

This site is best viewed in a modern browser with JavaScript enabled.

webwarrior925

I am trying to put a div layer over a Flash movie. I have tried nesting the div inside of the "Main" div holding everything and nesting it inside the div holding the Flash movie. Nothing seems to work. I also have tried changing the z-index value on the div, but it always ends up behind the flash movie. Here is my code so far. Any help would be sweet! Thanks in advance.

<body>

	<div class="Main">


		<div class="Banner">
		  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=			 				"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="800" height="539" title="Sheryl Trail Banner">
            <param name="movie" value="shreylTrail.swf" />
            <param name="quality" value="high" />
            <embed src="shreylTrail.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="539"></embed>
	      </object>



	  </div>



                 <div class="basic">


                         More content here

                </div>




	</div>

</body>

KDLA

You'll need to incorporate that text within the Flash movie. To my knowledge, HTML cannot be superimposed over a Flash file.

KDLA

coothead

Hi there webwarrior925,

you probably need to use...
[indent]
<param name="wmode" value="transparent">
[/indent]

Further Reading:-
[indent]
http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_14201
[/indent]
coothead

webwarrior925

KDLA wrote:
You'll need to incorporate that text within the Flash movie. To my knowledge, HTML cannot be superimposed over a Flash file.

KDLA

This is what I ended up doing.

and thanks for that code coothead. I'll give that a try in some free time.

forloop5

Here is the code you need to show your div layer above the flash layer. Its all about the embed code for flash. If you use the code below to embed your flash files then it will work. You can see it in action at buttonbeats.com

I found a way to put a div layer above a flash layer. I will post the code below. You have to use this code to embed your flash. Then your div layer will show up over the flash layer.

Eye_for_Video

Just wanted to clear up a few misconceptions about placing Flash content in front of or behind other html content.
The original poster was on the right track, z-indexing is how you place the Flash content in front of or behind other html content. What was missing was that z-indexing only work with elements that have a declared position (position:absolute or relative, etc.). When attempting to position Flash content, create a holder <div> for the Flash, give it a background color, width and height dimensions the same as your Flash content, and get that <div> positioned correctly before adding the Flash content.
From second post:

HTML cannot be superimposed over a Flash file

Sure it can, in this case the html container <div> requires a higher z-index than the flash content <div> and no background color.
From third post:

<param name="wmode" value="transparent">

wmode allows content BEHIND the Flash content to “show through” the Flash stage (or document) unless something on the Flash stage blocks it. It has nothing to do with placing html content in FRONT of the Flash content.
From the last post:

Its all about the embed code for flash

Well not really. The embed code by itself would just be in the natural flow of the page and would be parsed by the browser in whatever order and/or position that it appears on the Web page. So it’s not the embed code but rather the use of z-indexing and having a declared position for the <div> containing the Flash. The use of

<param name="wmode" value="opaque" />

would not allow html content behind the Flash content to show through.
So to sum up, positioning Flash content behind or in front of other html content is all about z-indexing and declaring <div> container positions. The use of wmode will determine if other html content behind the Flash content will show through. Using a combination of these methods would allow you to place Flash content in front of html content, and use wmode transparent to allow content behind the Flash to show through and also place another <div> with html content in front of the whole thing. In other words, 3 layers, 2 html layers with Flash content in the middle.
Best wishes,
Eye for Video
www.cidigitalmedia.com

1stbasis

Ok, Now for the answer "Eye for Video", would it be a quiz show you would be out. Sorry mate.

I played arround with every solution offered in this thread.

The right answer is indeet " <param name="wmode" value="opaque" /> "

I tried the z-index with and without position: relative; & position: absolute; & position: static;

Not one of these styles gave me the desired result but the object parameter wmode opaque did give me the desired result.

Eye_for_Video

Hey 1stbasis...
sorry if I missed your question... where you trying to position a <div> over the top of Flash as the original poster was?
The only way to do that is with a combination of z-index and wmode, as I mentioned earlier.
If all you were trying to do was to get the Flash into the natural flow of the page, then you could use wmode along.
For your review:

Window Mode (wmode) - What's It For?
There are three window modes.
Window
Opaque
Transparent
By default, the Flash Player gets its own hWnd in Windows. This means that the Flash movie actually exists in a display instance within Windows that lives above the core browser display window. So though it appears to be in the browser window, technically, it isn't. It is most efficient for Flash to draw this way and this is the fastest, most efficient rendering mode. However, it is drawing independently of the browser's HTML rendering surface. This is why this default mode (which is equivalent to wmode="window") doesn't allow proper compositing with DHTML layers. This is why your JavaScripted drop-down menus will drop behind your Flash movie.
In windowless modes (like opaque), Flash Player doesn't have a hWnd. This means that the browser tells the Flash Player when and where to draw onto the browser's own rendering surface. The Flash movie is no longer being rendered on a higher level if you will. It's right there in the page with the rest of the page elements. The Flash buffer is simply drawn into whatever rectangle the browser says, with any Flash stage space not occupied by objects receiving the movie's background color.

So wmode only gets you part way, to display content over the top of Flash, you must use z-indexing to "Stack" that content.
Best wishes,
EfV

JMiller

I followed the thread here and made some changes to my page. Adding the <param name="wmode" value="transparent"> fixed the issue in Internet Explorer, I my video is still showing in front on FireFox. Any suggestions.
Below is the site and the code.
http://www.starvisionadsales.com/test3.html

Code
<div id="Layer1" style="position:absolute; z-index:1; left: 171px; top: 155px; width: 290px; height: 260px; overflow: hidden; visibility: visible;" onMouseOut="MM_timelineGoto('Timeline1','1');MM_timelinePlay('Timeline1')" onMouseOver="MM_timelineStop()">
<div align="left">
<object width="290" height="260"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="wmode" value="transparent">
<param name="src" value="movies/demopen.mp4">
<param name="autoplay" value="true">
<param name="controller" value="false">
<embed src="movies/demopen.mp4" width="290" height="260"
autoplay="true" controller="false"
pluginspage="http://www.apple.com/quicktime/download/"> </embed>
</object>
</div>
</div>
<div id="Layer2" style="position:absolute; z-index:2; left: 59px; top: 0px; width: 532px; height: 653px; visibility: visible;" onMouseOut="MM_timelineGoto('Timeline1','1');MM_timelinePlay('Timeline1')" onMouseOver="MM_timelineStop()">
<div align="left"><img src="images/tv-hole.png" width="532" height="653" /></div>
</div>

Thanks,
Jason

Eye_for_Video

Easy as pie!! ... which by the way ... really ain't so easy if you've ever actually tried to make a lattice cherry pie from scratch... ahhh but you get my meaning!
Your old <object><embed> method of placing Flash on the Web page uses the <object> code for IE.... which you fixed and it WORKS by the way... but you forgot that FF uses the <embed> code... which you haven't fixed.... yet.
Add this to the <embed>

wmode="transparent"

Bada Boom, Bada Bing!
Have a GREAT day!
EfV

paulie

That worked fine for me - FF & IE 9... thanks for the help!

jenbrink

Wow. I'm looking for the opposite. I want my swf file in front and the alternative content behind the swf. Which works great in every browser except for IE9. I was using a table behind the swf file, but IE9 was showing both the flash and the non flash content on the page. (flash on the top of the page and alt content below, showing double images)

So I deleted the table and put my alt. content in a div. gave the alt. content a low z-index and the swf the higher. Nothing works in IE. My alt content is stacked on top.

I'm a newbie so I'm not sure if I should put the code up or not at this time. (I inherited the code from the previous designer). Thanks for any help!