Grow your CSS skills. Land your dream job.

Using Flash And Staying Standards Compliant

Published by Chris Coyier

Anyone who has ever worked with Flash on the web has likely come across the fact that embedding flash into a web page is usually no walk in the park. The code that Flash gives you to embed is something like this:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="650" height="117" id="test-flash-banner" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="test-flash-banner.swf" /><param name="quality" value="high" />
	<param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" />
	<embed src="test-flash-banner.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="650" height="117" name="test-flash-banner" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

It's not surprising why it was done this way...it works. But the way it works is through brute force (sometimes called the "Twice Cooked" method) and including more than what is needed for most browsers. The biggest problem is the <embed> tag which is invalid code which will cause your page not to validate as standards compliant.

This has been a problem for a long time. There is even an 2002 A List Apart article: Flash Satay: Embedding Flash While Supporting Standards. Five years later, they are still talking about it.

Fortunately for us, some smart folks have taken this problem under wing. There are now a variety of ways to handle standards-compliant flash embedding. Here are some options:

<swfobject>

Swfobject is the big kid on the block. Some previous projects now even consider themselves deprecated and refer to swfobject. Swfobject is open source and hugely robust, especially now very recently gone v2.0. There are two options for embedding flash with swfobject, and both are standards-compliant. Since they are just simply too many features to mention here, I will just mention a few that stand out to me:

  • Auto-detects Flash version and behaves accordingly
  • Can offer to auto-upgrade your Flash version
  • Offers alternative content when it's the only option, which is also good for SEO
  • Brings Flash to devices with very poor Flash support like the PSP
  • Eliminates the "click-to-activate" crap in IE

There is even a code-generator companion to swfoject which will help you build the code you need to get started.

 

Objecty

Objecty is the new kid on the block.

Objecty makes it dead simple to put video and audio on the web. It's meant to re-swizzle the whole paradigm. (Or something.)

The aim is for dead simplicity, which I love. Basically you just include the objecty javascript file on your page and then embedding media objects on your page is as simple as including an object tag with a unique class. It supports Flash (in both .flv (!) and .swf format), but also supports a ton of other formats: .mp4, .m4v, .m4a, .m4b, .wmv, .mov, .unity

Code is like so:

<object class="ObjectyMe" uri="myFlashMovie.swf" width="550" height="400"></object>

 

jQuery Media Plugin

If you are already using jQuery on your page, you might consider using the jQuery Media Plugin, which might be the simplest solution yet. It works by targeting anchor elements on the page by class or ID name and replacing it with the appropriate code to place the flash.

jQuery:

$('.media').media();

Markup:

<a class="media" href="sample.swf">My Flash Movie</a>

There is built-in browser detection which will replace the anchor tag with the appropriate code. Because your code will contain no embed code at all in the markup, no need to worry about validation errors.

Like Objecty, this plugin is far from limited to just Flash. Here are a list of the supported formats: asf, avi, flv, mov, mpg, mpeg, mp4, qt, ra, smil, swf, wmv, 3g2, 3gp, aif, aac, au, gsm, mid, midi, mov, mp3, m4a, snd, ra, ram, rm, wav, wma, bmp, html, pdf, psd, qif, qtif, qti, tif, tiff, xaml. The plugin will even detect the file type directly from the file extension in the href attribute.

Comments

  1. Donna

    Nice post. I’ll definitely use one of these simpler, compliant methods. Thanks!

  2. I use this code, it works in all browsers.

    Check out the pastebin for the code.

    http://pastebin.com/f2fac6e79

  3. gary

    does it really work in all browsers? even in safari (windows) ?
    tried writing the flash file from an externa JS file.. doesn’t display in safari..

  4. Hey thanks for this post. I didn’t realize you could embed flash in another way.

  5. i like to use swfobject. but Objecty looks interesting ill give it a run.

    thx for the post.

  6. Good round-up of some of the newer methods. For a more in-depth look at just about all of the other ways to embed Flash (including SWFObject), check out my article, Embed Flash or Die Trying. Hopefully it will provide additional help for your readers. Cheers!

  7. I like the new SWFObject 2.0 which works very well. But the jQuery-thing also looks interesting. I didn’t know that there are so many alternatives to SWFObject. Thanks!

  8. I’ve used swfobject along with open flash charts (OFC). Its very nice, but the project changed the code base from versions 1.5 to 2.0 drastically and OFC uses swfobject 1.5. I had to change the PHP API for OFC in order to use the latest release. I wish I knew about the jQuery media plug-in at the time. I would have preferred changing the API to implement that instead.

  9. Michael

    I used swfobject on a project 2-3 months ago and couldn’t believe how easy it was to use. I’ve been using it every since on projects that just want to have flash.

    -Michael

  10. Another solution?

    <object data="example.swf" type="application/x-shockwave-flash" width="300" height="300"><param name="movie" value="example.swf" /></object>

  11. Really good site, I like the new SWFObject 2.0 which works very well.
    Very useful informations, thx so mutch :)
    cheers

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".