Webdesign: show content on top of Flash or Silverlight component

I started playing with JQuery last week and used the Boxy plugin to display a dialog window to the user while disabling all other components. In the background it uses CSS’s z-index property to accomplish this. At least.. almost all components, because as you can see in the video below the flash movie kept appearing on top of the Boxy window. In a later test I noticed the same thing happens for Silverlight components.

Here is how to fix it:

Flash

Flash has a “wmode” parameter which you have to set to “opaque” for the z-index style to have an effect. For instance for the Flash JWPlayer:

<script type='text/javascript'> 

	var s1 = new SWFObject('player.swf','IFIPPlayer','400','300','9');

	s1.addParam('allowfullscreen','true');

	s1.addParam('allowscriptaccess','always');

	s1.addParam('flashvars','type=video&file=movie.flv');

	s1.addParam('wmode','opaque');

	s1.write('theplayer');

</script> 

Silverlight

Silverlight has a “windowsless” property which you have to set to ‘true’ for the z-index style to have an effect. For instance for the Silverlight JWPlayer:

<script type=”text/javascript”>

var cnt = document.getElementById(“player_http://ifip.test.ibbt.be/fedora/get/<%=@item.id%>/MAM_lowres”);

var src = ‘<%=ActionController::Base.relative_url_root%>/wmvplayer.xaml’;

var cfg = {

file:’http://ifip.test.ibbt.be/fedora/get/<%=@item.id%>/MAM_original_media’,

image:’http://ifip.test.ibbt.be/fedora/get/<%=@item.id%>/MAM_thumb’,

height:’<%=defined?(@flashplayer_height) ? @flashplayer_height : 300%>’,

width:’<%=defined?(@flashplayer_width) ? @flashplayer_width : 400%>’,

windowless:’true’

};

var ply = new jeroenwijering.Player(cnt,src,cfg);

</script>

<script type="text/javascript"> 

	var cnt = document.getElementById("theplayer");

	var src = '/wmvplayer.xaml';

	var cfg = {

		file:'movie.wmv',

		image:'thumb.jpg',

		height:'300',

		width:'400',

		windowless:'true'

	};

	var ply = new jeroenwijering.Player(cnt,src,cfg);	

</script> 

And a screenshot to prove it

flash 10 on Ubuntu amd_64

230  sudo apt-get remove flashplugin-nonfree flashplugin-installer

231  wget http://download.macromedia.com/pub/labs/flashplayer10/libflashplayer-10.0.22.87.linux-x86_64.so.tar.gz

232  wget http://download.macromedia.com/pub/labs/flashplayer10/libflashplayer-10.0.32.18.linux-x86_64.so.tar.gz

233  tar xvf libflashplayer-10.0.32.18.linux-x86_64.so.tar.gz

234  sudo mv libflashplayer.so /usr/lib/mozilla/plugins/

Flashplayer 10 is not yet supported by Adobe for amd_64 Linux architectures, but they do have an alpha relase in their labs: http://labs.adobe.com/downloads/flashplayer10.html. Here’s how to install it (Thanks to these guys, only the download url has changed. ).

sudo apt-get remove flashplugin-nonfree flashplugin-installer
wget http://download.macromedia.com/pub/labs/flashplayer10/libflashplayer-10.0.32.18.linux-x86_64.so.tar.gz
tar xvf libflashplayer-10.0.32.18.linux-x86_64.so.tar.gz 
sudo mv libflashplayer.so /usr/lib/mozilla/plugins/