Webdesign: show content on top of Flash or Silverlight component

October 6, 2009 at 11:18 am Leave a comment

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.

problem

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 = {
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 🙂

solved

Advertisements

Entry filed under: Uncategorized. Tags: , , , .

flash 10 on Ubuntu amd_64 Jeditable JQuery plugin on Rails

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Feeds

Articles to be written…

Twitter – kr3l

my del.icio.us

RSS Google Reader Shared Stuff

  • An error has occurred; the feed is probably down. Try again later.

RSS Listening to..

  • An error has occurred; the feed is probably down. Try again later.

%d bloggers like this: