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.
Extra information for this entry
-
Abstract
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. […]
-
Comments
You may leave a comment, or trackback from your own site.
-
Tags
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