Dynamic Publishing

SWFObject's dynamic publishing option uses JavaScript to embed SWFs in your HTML page by replacing a specified HTML element with an <object> element.

By default, this replacement happens when the page loads (technically when the page structure has loaded but before any images have been downloaded), however you can also use SWFObject to load SWFs on-demand.

Prepare your page's markup

It's a best practice to create a page that is still usable if the SWF cannot be embedded for some reason. This not only improves your page's accessibility, but it generally improves its searchability and therefore its ranking in popular search engines such as Google.

The easiest way to maintain a minimum level of usability is to provide simple HTML-based fallback content on your page. If possible, this HTML content should contain the same information contained in your SWF, but at a bare minimum you should provide a simple message informing visitors that Flash Player is required.

For example, if your SWF is a video player that will load a video, you may want to provide a transcript of the video for people to read:

<body>
  <div id="flashvideo">
    <p>If you had Flash Player installed, you would
       be seeing a Flash-based video right now. 
       Since you don't have Flash Player, here 
       is a text transcript of the video...</p>
  </div>
</body>

Notice in this example the fallback content is contained within a <div> that has the id "flashvideo"; SWFObject will replace this <div> (including all of its content) with an <object>.

Important: Once SWFObject replaces an element with the <object>, the old element is destroyed and no longer exists.

Here's our example before SWFObject executes:

<body>
  <div id="flashvideo">
    <p>If you had Flash Player installed, you would
       be seeing a Flash-based video right now. 
       Since you don't have Flash Player, here 
       is a text transcript of the video...</p>
  </div>
</body>

Here's the same page after SWFObject embeds the SWF:

<body>
   <object id="flashvideo"
           type="application/x-shockwave-flash" 
           data="myfile.swf"
           width="550" 
           height="400" [etc...]>
    </object>
</body>

Notice the old <div> is completely gone, and the new <object> has the same ID as the old <div>. SWFObject will retain the ID by default unless you specify a new one.

Setting up the SWFObject JavaScript

You'll need to create two <script> elements in your document's <head>; the first is a link to the SWFObject library file, and the second is for you to type out your page's SWFObject code:

<head>
<title>My SWFObject Page</title>
 
<script type="text/javascript" src="swfobject.js"></script>
 
<script type="text/javascript">
   //my swfobject code will go here
</script>
 
</head>

(Note that as of SWFObject v2.0, SWFObject JavaScript code should NOT be placed in the <body> of your document.)

SWFObject syntax: The simplest version

Flash Player provides all kinds of settings you can use when embedding a SWF. If you don't plan to make use of these settings and extra features, you can use the barebones approach:

swfobject.embedSWF("mymovie.swf", "flashcontent", "550", "400", "9");

In this example, the parameters have been specified as follows:

  • the URL of the SWF is "mymovie.swf"
  • the ID of the <div> that will be replaced is "flashcontent"
    • This ID corresponds with a <div> in the page's markup. If there is no element with this ID, your page will encounter a JavaScript error.
  • the width of the SWF is 550 pixels (written as a string "550")
  • the height of the SWF is 400 pixels (written as a string "400")
  • the minimum required version of Flash Player is 9 (written as a string "9")

These five parameters are the bare minimum required by SWFObject.

The complete barebones example looks like this:

<html>
<head>
<title>My SWFObject Page</title>
<script type="text/javascript" src="swfobject.js"></script>
 
<script type="text/javascript">
  swfobject.embedSWF("mymovie.swf", "flashcontent", "550", "400", "9");
</script>
 
</head>
 
<body>
 
<div id="flashcontent">
My fallback content goes here. 
This is what will display if 
Flash Player is not available
or is outdated.
</div>
 
</body>
</html>

Demo: barebones dynamic publishing

To learn about SWFObject's advanced options when using dynamic publishing, see Advanced Options with Dynamic Publishing.

Questions or Comments?

If you have questions or would like to point out an error, please post your remarks in the SWFObject Google Group. Thanks!