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]-->
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
Post a Comment