Skip to content

How to properly embed flash

As new browsers are created, it’s always a good idea to revisit previous best practices. I recently decided to look into how to best embed flash with today’s browsers. Due to my recent work on the Conditional Body Class method, I ended up creating something using the same concepts.

The Satay Method

The first standards-compliant, cross-browser method came from A List Apart. I’ll spare you all of the details, but the one downfall of this method is Internet Explorer will not attempt to load the latest plugin unless you provide the non-compliant “codebase” attribute to the object tag. The original reccomendation is to include a small movie at the beggining of your page that contains this attribute, therefore causing IE to detect the flash plugin version. However, including a small flash movie for only this reason is a little to reminicant of the “spacer.gif” from years past.

Javascript Satay

The obvious solution that most came up with was to use javascript to create the object. Therefore, the object wouldn’t exist until the page is rendered. This allows it to validate and then include non-compliant code. The trade-off here is that you are now requiring javascript to be enabled, a bad practice in terms of accessibility.

Conditional Satay

This is the method I’ve devised which uses Microsoft’s conditional comments. It’s a very simple idea: include the invalid code for only IE browsers. Using this method addresses both of the short comings of the 2 previously mentioned methods, no empty movies and no javascript.

 <!--[if IE]>
	<object
		type="application/x-shockwave-flash"
		data="movie.swf"
		codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
		height="400"
		width="200">
<![endif]-->
<!--[if !IE]>-->
	<object
		type="application/x-shockwave-flash"
		data="movie.swf"
		height="400"
		width="200">
<!--<![endif]-->
		<param name="movie" calue="movie.swf" />
		<param name="wmode" value="opaque" />
	</object>

Originally I had tried put the closing object tag outside of the conditional comment. That would allow me to only need a single closing tag for both browser conditions. After testing that method, I ran into a problem. Internet Explorer would display the content of the object if the browser didn’t have the plugin. I’m not really sure if that is a bug in IE or just an odd case that has no documented way of being handled.

In order to achieve the best support across all browsers, the entire object declaration needs to be inside each of the conditionals. Below is my final method for properly including flash.

 <!--[if IE]>
	<object
		type="application/x-shockwave-flash"
		data="movie.swf"
		codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
		width="200"
		height="400">
		<param name="wmode" value="opaque" />
		<param name="movie" value="movie.swf" />
	</object>
<![endif]-->
<!--[if !IE]>-->
	<object
		type="application/x-shockwave-flash"
		data="movie.swf"
		width="200"
		height="400">
		<param name="wmode" value="opaque" />
		<param name="movie" value="movie.swf" />
	</object>
<!--<![endif]-->

Update:

In IE7 and later, the syntax for conditional comments has changed slightly. An updated example is below.

 <!--[if IE]>
	<object
		type="application/x-shockwave-flash"
		data="movie.swf"
		codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
		width="200"
		height="400">
		<param name="wmode" value="opaque" />
		<param name="movie" value="movie.swf" />
	</object>
<![endif]-->
<!--[if !IE]><!-->
	<object
		type="application/x-shockwave-flash"
		data="movie.swf"
		width="200"
		height="400">
		<param name="wmode" value="opaque" />
		<param name="movie" value="movie.swf" />
	</object>
<!--<![endif]-->

For more information, check the msdn documentaiton on conditional comments.

Comments Post a Comment

[…] Also note that the technique discussed here can be useful in a variety of other cases. As I’ve written previously, it works quite well for embedding flash without the use of javascript. […]

Simple question from someone who hasn’t touched Flash in 6 years now. Is there a different between using an HTML attribute or a param tag? wmode=”opaque” versus param name=”wmode” value=”opaque”

Good script but you left out a “–>” after the end arrow of the first ‘if’ command

For the correct implementation of this code, see the Microsoft MSDN TechNote at:

http://msdn.microsoft.com/en-us/library/ms537512.aspx

Essentially you use the downlevel-hidden conditional tags for code you want Internet Explorer to implement and the downlevel-revealed conditional tags for code you want non-Internet Explorer browsers to implement.

Hi, I am trying to embed flash document but block content keeps appearing. Please help me. I am not a programmer, therefore I do not understand most things. Please help me. I am mother and want to do web page designing as a job. please help me.

Srimali

[…] How to embed Flash properly Share and Enjoy: […]

Thanks :) This article helped to solve my issue.

thank your code work great!

thanks for this piece of code. that ‘<!–>’ part saved my life
in the meantime i use this slightly modified version of it:

oops - that didn’t work out. give me a second try:
<!–[if lte IE 8]>
<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ width=”200″ height=”400″>
<param name=”movie” value=”movie.swf” />
<param value=”always” name=”allowScriptAccess” />
<param value=”transparent” name=”wMode” />
<param value=”true” name=”swLiveConnect” />
</object>
<!–<![endif]–>
<!–[if !(IE)|(gt IE 8)]><!–>
<object type=”application/x-shockwave-flash” data=”movie.swf” width=”200″ height=”400″>
<param value=”always” name=”allowScriptAccess” />
<param value=”transparent” name=”wMode” />
<param value=”true” name=”swLiveConnect” />
</object>
<!–<![endif]–>

Post a Comment

Extra information for this entry