Embedding Flash

Single Embed Code

Let's start with the easiest way to embed Flash in a website – a single embed code. Note: this example presumes there’s a player.swf file located in the same directory as the HTML page it's embedded in; the JavaScript interaction does NOT work with an embed code; you'll need to use the SWFObject method for that.

<embed 
  src="player.swf" 
  width="300"
  height="300"
  allowscriptaccess="always"
  allowfullscreen="true"
/>

Of these parameters, the most important one is the src. This contains the location of the SWF file to include, (here player.swf). If the SWF file resides in another directory, we can point to it with a relative path (eg. flash/player.swf or an absolute path (eg. http://www.myserver.com/flash/player.swf).

The width and height parameters determine the SWF’s dimensions in pixels, but they can also be entered as a percentage of the SWF container (eg: width="100%").

Last, allowscriptaccess allows the SWF to communicate with external scripts (and link to external pages), while allowfullscreen uses the fullscreen mode. If you do not want to allow this, you can remove both parameters, since they default to sameDomain and false, respectfully.

Extra Parameters

The code listed above uses only a couple of the available parameters. A complete list of them can be found at Adobe's website. Here’s a brief list of the most interesting parameters:

1. bgcolor (#rrggbb): sets the SWF background color using a hexadecimal value.
2. flashvars (variables): the variables placed here will be loaded in the SWF. The JW Player extensively uses those.
3. menu (true, false): set this to false to hide most of the right-click menu.
4. wmode (opaque, transparent, window): set this to either transparent or opaque to fix z-index or flickering issues.

Flashvars

Of the above parameters, the most interesting is flashvars, which allows you to send startup variables to the SWF. The JW FLV Player and Image Rotator support a large number of flashvars, which makes them easy to customize. Let's give our example player.swf three flashvars; one for the playlist, one for the background color and one for automatically starting a song:

<embed 
  src="player.swf" 
  width="300"
  height="300"
  allowscriptaccess="always"
  allowfullscreen="true"
  flashvars="file=playlist.xml&autostart=true"
/>

As you can see, flashvars are entered as a single string, with an "=" symbol separating the name and value and an "&" symbol separating subsequent flashvars. There's no limit to the number of flashvars you can add to the embed code and the JW Player and Image Rotator support many of them

Flashvars Problems

Three problems related to flashvars can cause them not to load.

The first problem relates to relative linking of files. When linking to MP3, image and XML files, you should always start from the location of the HTML in which the SWF is embedded. So in the previous example, if the SWF was placed in a subdirectory, the flashvar pointing to the playlist would remain file=playlist.xml and not file=playlist.xml. The one exception is that the path of FLV files should be given relatively from the SWF file. In order to prevent confusion, you can always point to files using an absolute URL (including the "http://www").

The second problem relates to the importing of XML files. Due to security restrictions, Flash can only import XML files if they reside on the same domain as the SWF file. Thus, in our media player example, if the SWF is located in the domain www.myserver.com the playlist.xml must also reside on www.myserver.com. A workaround for this is to use a simple crossdomain.xml file, which should be installed in the root of the site that contains the XML. Here's an example from YouTube..

The third problem relates to the three symbols: ?, = and &. Since they are used to stack the flashvars, they cannot be used in the flashvars themselves. By escaping these vars, the problem can be solved. Therefore, replace the three symbols with their escaped strings and unescape() them again in the SWF as follows:

1. ? → %3F
2. = → %3D
3. & → %26

XHTML & JavaScript

With the regular <embed> code is that it's not a valid XHTML tag. So, if you want to build a standards-compliant, accessible website, you cannot use it.

A workaround for both these problems is to use JavaScript to embed Flash content. After a web page has loaded you can insert the <embed> tag, circumventing the XHTML problems. As a bonus, you can use JavaScript to determine whether the correct Flash Plugin is available on your visitor's computer. If not, alternative content can be loaded.

SWFObject

The SWFObject script by Geoff Stearns is an excellent, freely available JavaScript that embeds Flash. It's used extensively on this site, wherever an SWF file is embedded. To use it, first upload the swfobject.js to your server and include it in the <head> section of your website:

<script type="text/javascript" src="swfobject.js"></script>

Next, give the HTML element in which the SWF should be placed a unique id:

<div id="flashbanner">this will be replaced by the SWF.</div>

Last, instantiate a SWFObject below the named HTML element along with all the necessary parameters (for a full list of parameters, visit the SWFObject Website):

<script type="text/javascript">
  var so = new SWFObject('player.swf','mpl','300','250','9');
  so.addParam('allowfullscreen','true');
  so. addParam('flashvars','file=playlist.xml&autostart=true');
  so.write('flashbanner');
</script>

The SWFObject instance will create the code needed to embed the player.swf. It sets its dimensions to 300 x 250 pixels and also sends the flashvars for the file and autostart variables.The instance also replaces the text by the SWF, so we can see a Flash movie directly embedded in our page without borders but with XHTML validity.

Wrapping Up

The implementation of SWFObject wraps up this general overview of embedding Flash in websites. To get additional questions answered or learn more hints and tips, please visit our forum. Also, if you want to create specific embed codes for the JW Player or the Image Rotator, take a look at the setup wizard, which can automatically generate it.