HTML + FLEX: display flash behind HTML

Question

hi,

how can I display my flash video, behind the tags on top of the page ?

Website: http://www.sanstitre.ch/drupal/portfolio?tid[0]=58

thanks

I'm using SWFObject wrapper (cross-browser) http://code.google.com/p/swfobject/

<div style="background-color: rgb(255, 255, 255); width: 100%;">
<object height="445" width="660" type="application/x-shockwave-flash" data="/drupal/videoPlayer/bin-debug/videoPlayer.swf?file=http://www.sanstitre.ch/drupal/sites/default/files/files/projects/WM 1976/videos/P1030297.flv" id="movie_player_1" style="visibility: visible;" wmode="transparent">
<param name="bgColor" value="#ffffff">
<param name="allowfullscreen" value="true">
<param name="autoplay" value="true">
<param name="flashvars" value="0=movie_player_1">
<param value="transparent" name="WMODE">
</object>

Answer 1

You can read about how to do this and other things involving SWF/HTML layering here: http://www.flashdesignerzone.com/tutorials/t1026.php

Hint: It involves setting wmode="transparent"

Answer 2

Hi you can add this in your html code

 <PARAM NAME=wmode VALUE=transparent> 

and find the embed and add this

wmode="transparent"

try this.

Answer 3

In order to get the Flash movie to display underneath something, you indeed need to set wmode to either transparent or opaque. It probably won't make that much of a difference from a performance stand point since both actually makes flash draw itself in the same window handle as the browser instead of having its own window handle.

Anyhow, there's a second step to displaying it underneath something and that is to make sure it's z-order in the html is lower than that which you whish to display on top. That could be solved by writing your html in such a way that the tags to be displayed on top are subsequent to the flash movie, but I find that the absolutely easiest way to do this is to use absolute positioning and the z-order style attribute to define the ordering. Obviously it depends on the rest of the site and it's html.

That should do it for the layering part. The interactivity issue however may be a real problem in case you have html elements on top of the flash movie that steals the mouse focus (such as paragraphs or divs). In this case you may or may not have to intercept the events using javascript and then pass the information from those event on to your flash movie using ExternalInterface. It's ugly and may break in unexpected ways (ie, the dom changes for instance), but it's not terribly hard to implement.

Answer 4

I've solved adding

display: block

property to object. (And of course doing all what you suggested).