[RESOLVED] How to cover SWF with another page element like image

[lmartinLMV]

Is there a way to cover part of an SWF with another element like a div with absolute positioning containing an image? I've tried this but the SWF always appear on top.


This is the code:

<div style="position:relative;">
<img src="TVbackground.jpg" alt="sponsored video">

<div style="position:absolute; top:37px; left:56px; z-index:">
<object width="190" height="154" style="background: none repeat scroll 0% 0% black; display: block;" type="application/x-shockwave-flash" data="http://flash.epi3.fesoria.com/recursos_epi/playerNew/viewer.swf">
<param value="http://flash.epi3.fesoria.com/recursos_epi/playerNew/viewer.swf" name="movie">
<param value="url=http://ads.grupozeta.es/2/www.levante-emv.com/videoplayer/1232565891@x90&amp;video=file%3Dvideosamaranchesportistes.flv%26streamer%3Drtmp%3A%2F%2Fflash.epi3.fesor ia.com%2Fvideostream%2Frecursosred%26controlbar%3Dbottom%26resizing%3Dtrue%26autostart%3Dtrue%26allo wfullscreen%3Dtrue%26image%3Dhttp%3A%2F%2Ffotos.fesoria.com%3A12080%2F30429.jpg&amp;auto=si" name="FlashVars">
<param value="high" name="quality">
<param value="true" name="allowfullscreen">
</object>
</div>

<div style="position:absolute; bottom:0px; z-index:10000"><img src="bottom_backgnd.jpg" alt="TV backgnd bottom" /></div>

</div>

What I want to do is that the SWF video appears on a TV set screen, but I want the bottom part of the video to be covered by the bottom frame of the TV set.

[Eye for Video]

Sure, you just need to use a couple of things. First, give the Flash a wmode:
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.
Second use CSS z-indexing along with a declared position to stack one element on top of another.
Here is a sample page with Flash sandwiched between two divs which contain text:
http://www.cidigitalmedia.com/tutorials/flash_div.html
View the source code for full details.
Best wishes,
Eye for Video
www.cidigitalmedia.com

[lmartinLMV]

Wow thank you!

Your explanation was very helpful! :)

[JTwoody]

Just wanted to say thanks - really helpful. :)

[Eye for Video]

Glad you found the info helpful.
One more thing about positioning. z-indexing only works with elements that have a declare position and how that element reacts to a declare position will depend on whether or not it's parent element also has a declare position.
So
#flash {
z-index:5;
}
will not work without ALSO giving it a declare position.
And the actual display of #flash will very depending on whether or not it's parent also has a declared position.
From an old post:
The thing missing from your positioning is that unless the parent element also has a declared position, the child will do 1 of 2 things.
If position:relative, it will position as desired but space will be left as though that element was still in the natural flow. So you may move the 500 X 100 element down and over, but a 500 X 100 space will be left, as though it was still there.
If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands.
Best wishes,
EfV