This is a message.


Flashembed is a modern way of embedding Flash. Simple, elegant and robust.

standalone demo


The above example was performed with this JavaScript call: flashembed(this, "flash_promo.swf"); If you don't need anything special, it's easy to get Flash up and running on your site.

JSON configuration

Flash can be configured with JSON. Compared to XML this is simpler and much more flexible. In fact this was the main reason for developing this tool.

jQuery support

flashembed is designed with scripters in mind. A polished programming API together with support for jQuery selectors has been built-in. As opposed to other jQuery Tools flashembed does not requirejQuery.

1.09 kb!

This crazy size is one quarter of the competitors. The clean source code passes Douglas Crockford's JavaScript Verifier and it assigns only one global variable: flashembed.

Note: Flash is becoming an old school technology. The iPad and other products are removing the support for Flash. JavaScript will rule. Having said that, Flash technology still has an important role to play on the Internet; especially when you want to play videos.

Flashembed and jQuery Tools

Distinct from other jQuery Tools, this tool does not depend on jQuery. You can use it as a standalone tool for embedding Flash. The jQuery syntax is supported but not required. For this reason, this tool lacks some of the features available in other tools such as callback functions and the ability to write plugins.


We have seen that the best way to learn is through demos. Each of the following examples contain both documented source code and a standalone version of the demo that you can use to get flashembed working on your site:


flashembed is a function and it accepts the following arguments:

  flashembed(container, embedOptions, flashConfiguration);

  1. container identifies where the Flash object is placed on the document.
  2. embedOptions specifies the path to the Flash object and optionally how it is embedded.
  3. flashConfiguration is an optional argument and it configures the actual Flash object.

1st argument: container

This is either a DOM element or a string representing some element's id attribute. The Flash object is placed inside this container. It's important to note that you don't have to worry about where you place your container on the page or where you place your flashembed call. This tool takes care of finding the container you specify.

As of version 1.2 you can prefix the ID name with # character. For example, #mydiv simulating the syntax of jQuery selectors.

2nd argument: configuration

The second argument specifies the path to the Flash object and optionally how it is embedded. This is either a simple string representing the path to the embedded flash object or an object that has many different configuration options including the path to the Flash object.

In case you specify the second argument as an object, you can find a list of available options below. The options before the grey line are specific to flashembed and below that you can see the most popular Flash parameters that are understood by the Flash technology itself.

property default description
src The path to the Flash object to be embedded. This is the only required option.
version [3, 0]

Specifies the minimum version required for the plugin. Adobe releases Flash versions in the following format: [major, 0, fix] where the minor number is always zero. For that reason, this tool ignores the second version number and the version is given in this format: [major, fix].

So if you want to provide alternate content for versions that are below [9,0,45], you must supply [9,45] here.


This is an absolute or relative path to a expressinstall.swf file.

Express Install technology allows you to seamlessly upgrade visitors to your website to the latest player using a Flash-based experience. Express Install allows you to design an in-context upgrade experience for your content so users never have to leave your site. It also lets you gracefully handle user cancellation and avoid system restarts.

If this is specified and the user's Flash version is greater than [6, 65], then this plugin attempts to install Flash on-the-fly. You can learn more with this demo.

onFail A JavaScript function that is evaluated when the Flash plugin is missing or its version is too old. You can learn more from this demo. This function is called in every possible scenario when and old version is detected. Inside the function the this variable is a pointer to the flashembed API.
w3c false If set to true, the tool switches to standards-based object syntax when generating HTML. You can find more information about this technical subject here.
cachebusting false By enabling this property flashembed will force the SWF file to be loaded from the server and skip the browser's cache no matter what the expiry headers are. This is achieved by appending a random query string variable to the request URL.
id random string id attribute for the generated OBJECT tag. If this is not explicitly given then a random string is used because in certain browser/os combinations the ID is required for solid functionality.
bgcolor The hexadecimal RGB value in the format of #RRGGBB. This specifies the background color of the movie.
width 100% It is recommended that you not change this and instead specify the width and height for the container element using CSS.
height 100% It is recommended that you not change this and instead specify the width and height for the container element using CSS.
wmode window Set this to "opaque" if you want to place normal HTML elements on top of the Flash object, for example, a dropdown menu. You can find a demo about this here.
allowfullscreen true Allows your Flash object to enter Fullscreen mode. If you don't need this feature or are concerned about security, set this to false.
allowscriptaccess always This enables Flash-to-JavaScript communication. If you don't need this feature or are concerned about security, set this to false.
quality high Possible values are low, high, autolow, autohigh, and best. low favors playback speed over appearance and best provides the best display quality and does not consider playback speed. It is recommended that you not change this. The default value high is the best compromise between quality and playback speed.

3rd argument: flashvars

The third argument configures the Flash object you have defined in the second argument. This is optional because not all Flash objects are configurable. This is specified as a JavaScript object as follows:

  // supply configuration (flashvars) for the Flash object
flashembed("flash", "my_object.swf", {
my_param: 'foobar',
my_other_param: 'Hello world'


Flashembed has the unique feature of configuring your Flash objects with JSON. This gives you the ability to supply complex configurations directly upon embedding. JSON is a JavaScript-based syntax and is much more flexible and simpler than XML which has historically been used for Flash configuration. Here is an example of a JSON-based configuration:

  flashembed("flash", "my_object.swf", {
a JSON-based configuration variable.
enter the modern world of Flash configuration!
my_param: {
my_array: [1, 2, 3], ,
my_other_param: 'Hello world',
nested_object: {
another_array: ["foo", "bar", 30.3]


If you are developing a Flash object and want to configure it with JSON, you can download JSON parsers for Flash from as3corelib.

A few embedding examples

  // install the Flash object inside an element whose id is "flash"
flashembed("flash", "myfolder/my_flash_object.swf");
// install the Flash inside a certain DOM element
var domElement = getElementById("flash");
flashembed(domElement, "my_flash_object.swf");
// tweak the embedding options
flashembed("flash", {
src: 'my_object.swf',
allowfullscreen: false


jQuery support

Flashembed has support for jQuery. This means that it can work as both a standalone script or as a jQuery plugin. You can use jQuery selectors to select elements from the page and place Flash objects inside them. Here is the generic jQuery syntax for flashembed:

  $("jquery_selector").flashembed(configuration, flashvars);


As you can see, there are a maximum of 2 arguments here and flashvars is optional as before. You can find more information about jQuery selectors here. Here is an example that will search all div elements with the class name "flash" and place a Flash object inside them:



Simple and powerful. Once you have installed the Flash objects you can access the flashembed API with jQuery's data method as follows:

  // get access to the flashembed programming API
var api = $("div.flash:eq(0)").data("flashembed");


Flashembed API

Here you can see the two different ways of accessing the Flashembed API:

  // the API is returned by the flashembed call
var api = flashembed("flash", "myfolder/my_flash_object.swf");
// inside the onFail function, the "this" variable is a pointer to the API
flashembed("container", {src: 'my_object.swf', version: [9, 115], onFail: function() {
// use API methods here
var conf = this.getConf();


This API has thr following methods available for your use:

method return value description
getApi() DOM element Some Flash objects have a JavaScript API. This method returns a pointer to that API.
getConf() Object Returns the optional configuration for the Flash object (3rd argument).
getOptions() Object Returns the embedding options for the Flash component (2nd argument).
getRoot() DOM element Returns the container for the Flash object

Static methods

Flashembed exposes few static methods. Static methods don't need any instances and can be called directly from the flashembed namespace. For example:

  // get the embedding code for the supplied options and configuration
flashembed.getHTML({src: 'my_object.swf', w3c: true}, {
param1: 'foobar',
param2: 'baz'

method return value description/example
asString(Object) String Converts given Object to a JSON encoded string. The object can contain any JavaScript literals such as strings, arrays and other objects on any level. Function properties are converted to a string: function().
getHTML(options, config) String Returns the embedding code for the given embedding options and optional Flash configuration. This method is useful if you want to quickly generate the object tag for your Flash objects so that you don't need to use JavaScript on your pages.
getVersion() Array Returns the Flash version of the user. Returns the array [major, fix]. For example: [9,45]. If Flash is not installed at all a [0, 0] is returned.
isSupported(version) boolean Whether the given version is supported. Example: flashembed.isSupported([9, 0]);

Generated HTML

This section describes what happens "behind the scenes" and what kind of HTML is generated for the client when the Flash object is embedded. This is quite technical and if you are not interested in W3C standards feel free to skip this section.

When studying what HTML will be produced we are using the following flashembed call:

  flashembed("clock", "/media/swf/global/clock.swf");


Which will generate a Flash-based clock as seen below:

This will generate the following HTML for Mozilla, Safari, Opera and Chrome:

  <object data="/media/swf/global/clock.swf"
type="application/x-shockwave-flash" width="100%" height="100%">
<!-- these parameters are generated by default -->
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="quality" value="high">


This is the standards-based syntax as specified in this W3C specification. It's no surprise that Internet Explorer does not support this syntax so this browser is supplied with the following HTML instead.

  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
height="100%" width="100%">
<param value="/media/swf/global/clock.swf" name="movie"/>
<param value="true" name="allowfullscreen"/>
<param value="always" name="allowscriptaccess"/>
<param value="high" name="quality"/>


This works only in IE and not in other browers.

W3C configuration option

Flashembed comes with a W3C option that will generate a standards-based syntax that works on all browsers. This syntax is specified in this A List Apart document and you can generate similar code like this:

  // enable W3C object code syntax
flashembed("clock", {src: "/media/swf/global/clock.swf", w3c: true});


The generated HTML looks like this:

  <object data="/media/swf/global/clock.swf"
type="application/x-shockwave-flash" height="100%" width="100%">
<param value="/media/swf/global/clock.swf" name="movie"/>
<param value="true" name="allowfullscreen"/>
<param value="always" name="allowscriptaccess"/>
<param value="high" name="quality"/>


This would appear to be a perfect solution, but there is one drawback. While every other browser is getting it right, IE/Windows is not streaming - it waits for the entire movie to download before playing it. This is fine for small movies, but for anything serious the lack of streaming is unacceptable. This is why this flag is only suitable for standards fanatics that are using small SWF files. The A List Apart document describes a workaround for this called "Flash satay" and you can read about it in that document.