Static Publishing

SWFObject's static publishing approach is the most bulletproof and standards-compliant approach for embedding Flash SWFs into HTML pages.

Static publishing adds the SWF to the page using pure HTML markup, ensuring the SWF will be embedded even when JavaScript is unavailable.

Static publishing requires adding two <object> elements to your page as follows:

<object id="flashcontent" 
        classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
        width="550px" 
        height="400px">
  <param name="movie" value="mymovie.swf" />
 
  <!--[if !IE]>-->
  <object type="application/x-shockwave-flash" 
          data="mymovie.swf" 
          width="550px" 
          height="400px">
  <!--<![endif]-->
 
    <p>
      Fallback or 'alternate' content goes here.
      This content will only be visible if the SWF fails to load.
    </p>
 
  <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
 
</object>

As with the common <object> <embed> </object> pattern, the outer <object> works in Internet Explorer, while the inner <object> targets all other browsers.

Internet Explorer gets confused by the second <object>, which is why we use conditional comments to tell Internet Explorer to ignore this second <object>. (If you're unfamiliar with conditional comments, PPK has written a nice overview.)

Because the inner <object> is not meant for Internet Explorer, you must use conditional comments to tell Internet Explorer to ignore it. If you don't, you will encounter bugs.

Why not use <embed> instead of all the conditional comments?

SWFObject improves on <object> <embed> </object> by allowing you to include fallback content for visitors who don't have Flash Player installed. The <embed> element does not provide space for displaying fallback content.

Also, while <embed> is supported in most browsers, is not an official W3C standard. Using <object> instead of <embed> enables your page(s) to pass strict W3C validation.

Specifying your settings

You will normally specify three attributes for the outer <object>:

1. the ID of the SWF (optional)
2. the width of the SWF
3. the height of the SWF

The attribute classid will always be "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000".

The outer <object> also requires a child <param> element that contains the URL for your SWF:

<object id="flashcontent" 
        classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        width="550px" 
        height="400px">
  <param name="movie" value="mymovie.swf" />
</object>

If you'd like to specify other optional settings, such as wmode or allowScriptAccess, you will need to add a new <param> for each item, like so:

<object id="flashcontent" 
        classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
        width="550px" 
        height="400px">
  <param name="movie" value="mymovie.swf" />
  <param name="wmode" value="opaque" /><!-- optional -->
  <param name="allowScriptAccess" value="always" /><!-- optional -->
</object>

The inner <object> is formatted differently than the outer <object>, but requires the same general information: the URL ('data') of the SWF, the width of the SWF, and the height of the SWF. Note classid is replaced with type="application/x-shockwave-flash".

As with the outer <object> you will need to add a <param> element for any other settings you wish to specify, such as wmode or allowScriptAccess:

<object type="application/x-shockwave-flash" 
        data="mymovie.swf" 
        width="550px" 
        height="400px">
  <param name="wmode" value="opaque" />
  <param name="allowScriptAccess" value="always" />
</object>

When we put it all together with the conditional comments and optional wmode and allowScriptAccess params, it looks like this:

<object id="flashcontent" 
        classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
        width="550px" 
        height="400px">
  <param name="movie" value="mymovie.swf" />
  <param name="wmode" value="opaque" /><!-- optional, used here as an example -->
  <param name="allowScriptAccess" value="always" /><!-- optional, used here as an example -->
 
 <!--[if !IE]>-->
  <object type="application/x-shockwave-flash"
          data="mymovie.swf" 
          width="550px"
          height="400px">
    <param name="wmode" value="opaque" /><!-- optional, used here as an example -->
    <param name="allowScriptAccess" value="always" /><!-- optional, used here as an example -->
  <!--<![endif]-->
 
    <p>
      Fallback or 'alternate' content goes here.
      This content will only be visible if the SWF fails to load.
    </p>
 
  <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
 
</object>

Demo: static publishing

Wherefore art thou, JavaScript?

Because static publishing is purely markup-based, you don't need to include the SWFObject JavaScript file — the SWF will embed just fine without it. However, the SWFObject JavaScript file will provide you with some additional scripting tools you may find handy, including:

• the ability to specify minimum Flash Player version required for your SWF
• the ability to use Adobe's Express Install system (an auto-update mechanism for Flash Player)
• the ability to use JavaScript to target the inner <object> using the swfobject.getobjectById() utility

To learn more about using JavaScript with SWFObject's static publishing technique, see Using JavaScript with Static Publishing.