Valid (X)HTML while embedding SWF Flash objects
I 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" codebase="http://download.macromedia.com/pub/shockwave/ cabs/flash/swflash.cab#version=6,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" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="30" height="30"> </embed> </object>
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:
- Ditch the
embed-tag, it isn’t needed and it doesn’t validate.
classidtells 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.
codebaseattribute 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.
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.
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
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" data="music/sound.swf" width="0" height="0"> <param name="movie" value="music/sound.swf" /> <param name="quality" value="high"/> </object>