Valid (X)HTML while embedding SWF Flash objects

FlashI always try to get the sites I build to validate, and be written in semantically correct markup. Sometimes a client demands certain things which might make it easier to just stop when the code works, and don’t bother to make it validate. I’ve found that every single time I’ve taken that route in the past, it has turned it’s back on me every single time.

In this particular case, the client wanted to embed (flash) music in his site, something I don’t really like but if it has to be done, it has to be done. His previous site contained the following code to embed the music SWF file:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
cabs/flash/,0,29,0" width="30" height="30">
<param name="movie" value="music/sound.swf">
<param name="quality" value="high">
<embed src="music/sound.swf" quality="high" 
	type="application/x-shockwave-flash" width="30" height="30">

As you can see, a true code horror. So I started looking around for another way to embed the flash in valid HTML and came by this article by Drew McLellan. It basically said these four things:

  1. Ditch the embed-tag, it isn’t needed and it doesn’t validate.
  2. The classid tells Internet Explorer which player to use, fortunately,
    Flash Player responds to type=”application/x-shockwave-flash” as well, so we can ditch
    this ugly line.
  3. The codebase attribute usually points to the location of the Flash plugin on
    Macromedia’s servers, bad use of the element for the url should be within the same domain.
    One downside:
    players will not update if they need a new version now. But since this is simple music,
    we’ll just assume that everybody has a correct player.
  4. The only one left: the data-element, it tells Mozilla and Opera where the
    music is located since they won’t get it out of the param-element.

And there you have it: a nice and clean valid way to embed Flash music in (X)HTML. This validates AND get’s everybody happy:

<object type="application/x-shockwave-flash" 
width="0" height="0">
<param name="movie" value="music/sound.swf" />
<param name="quality" value="high"/>

Recent posts