How to correctly insert a Flash into XHTML

Although flash is the most spread active element of webpages, a lot of designers still don't know the correct way to insert it into HTML document.. The standard concept, advertised by Macromedia is absolutely unusable.

Just a reminder:

<object
  classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
  codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
  width="550" height="400">
  ...
  <param name="movie" value="movie.swf" />
  <param name="quality" value="high" />
  ...
  <embed src="movie.swf" quality="high" bgcolor="#ffffff" width="550" height="400"
	type="application/x-shockwave-flash"
	pluginspage="http://www.macromedia.com/go/getflashplayer">
  </embed>
</object>

Attributes of <object> element are subordinated to needs of Internet Explorer and they won't work in other browsers. Other browser use element <embed> for the same purpose, but it isn't listed in HTML or XHTML specifications. The code is therefore not valid and is full of proprieatary hacks.

The biggest problem is in the fact, that it's not possible to provide alternative content which will be displayed to users who don't have flash player (ca. 10%)

Looking for solution

What are the requirements?

• it must work in all major browsers
• it must display alternative content if the Flash plugin is missing
• it must not rely on JavaScript
• it must be compatible with Eolas workaround trick

Surely we have to get rid of the <embed> element. By this simplification we'll get distinct space for alternative content. The script will now look like this (example)

<object
  classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
  codebase="http://fpdownload.macromedia.com..."
  width="550" height="400">

  <param name="movie" value="movie.swf" />
  <param name="loop" value="false" />
  ...
  <p>This is alternative content</p>

</object>

The presented solution will work in IE and Opera and if Flash is uninstalled the alternative content is correctly displayed.

However, script still uses attributes of element <object> contrary to specification and therefore Mozilla won't display Flash (it will display alternative content). Ok, let's get it into accordance.

We'll remove attributes classid and codebase and replace it by correct MIME type and data containing path to Flash file. Parameter movie is then becoming dispensable. After the changes script will look like this (example):

<object
  type="application/x-shockwave-flash"
  data="movie.swf"
  width="550" height="400">

  <param name="loop" value="false" />
  <param name="movie" value="movie.swf" />
  ...
  <p>This is alternative content</p>
</object>

That will work in Mozilla and also in Opera. In Internet Explorer it won't. If we returned the above mentioned parameter movie, IE would have displayed the Flash (“example”::http://knowhow.davidgrudl.com/…e-W3C-2.html), but with unwelcome limitation – the progressive download won't work. Flash will be displayed only after it's file completely downloaded.

Drew McLellan took the same considerations back in 2002 when he came up with a method called Flash Satay, which solved the problem of lacking progressive download by using of additional container Flash. Because of that it has solid problems with accesibility (which doesn't bug me that much) and it also won't work with Eolas workaround trick. And that is indeed a major glitch.

How to combine the two scripts?

We have two notations, varying just in a detail. I've tried number of ways how to put them together. In all of them I met bigger or smaller difficulties. In one case Mozilla doesn't display alternative version, in other IE has problems, etc.

The best thing I could come up with was to completely avoid combining of those two scripts. Inserting both of them to HTML and differentiate them by using of conditional comments.

Code written for IE will be wrapped like this:

<!--[if IE]>
HTML code only for IE
<![endif]-->

But how to assign a code dedicated to other browsers? For this purpose there exists a negated conditional comment, which is unfortunatelly not valid. We will solve this problem by using of a trick (explanation) and rewrite the comment to this final valid form:

<!--[if !IE]> -->
HTML code for all except of IE
<!-- <![endif]-->

Final Solution

The complete code will then look like this (example + validator):

<!--[if !IE]> -->
<object type="application/x-shockwave-flash"
  data="movie.swf" width="300" height="135">
<!-- <![endif]-->

<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
  width="300" height="135">
  <param name="movie" value="movie.swf" />
<!--><!--dgx-->
  <param name="loop" value="true" />
  <param name="menu" value="false" />

  <p>This is <b>alternative</b> content.</p>
</object>
<!-- <![endif]-->

Maybe it's not a brilliantly elegant solution, but it's only truly functional solution that I have found.

• it's valid
• it's functional in all browsers that I know
• it always show alternative content if the plugin is missing
• it can be combined with Eolas workaround trick
• it doesn't require javascript
• tags <param> are not doubled

note: because of Opera, don't use <param name="wmode" value="transparent" /> or opaque

Kindly translated by creamd