Embedding flash movies made easy
By Justin Silverton
There are a few way to embed a flash object or movie in a webpage:
1) Default code from adobe
It consists of an Object tag with an Embed tag placed inside it. This is the most popular Flash embed method and is the default choice when publishing your Flash movie from the Adobe Flash IDE. This is the most compatible way to embed a Flash movie, and will work in the widest range of browsers.
2) A separate flash movie
This method involves placing a Flash movie on the index page of your website, and this Flash movie then checks the versopm variable in the Flash player and redirects the user either to the Flash content inside the site, or an upgrade page.
Issues to consider with this method
- It will damage your search engine positioning - Since you are now using your index page as an empty Flash detection page, when people search for you in Google or other search engines, many times, the description text ends up showing up as “Detecting Flash Player” or even no description at all.
- It is not valid HTML or XHTML
3) The Adobe Flash Player Detection Kit
Adobe has a flash detection kit that comes with Flash versions 8 and higher.
Issues to consider with this method
- Not very user friendly
- has the same issues as #2
A better solution is to use SWFObject, a Javascript Flash Player detection and embedding script.
The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible. It is also search engine friendly, degrades gracefully, can be used in valid HTML and XHTML 1.0 documents.
SWFObject works in all the current web browsers, including, on PC: IE5/5.5/6, Netscape 7/8, Firefox, Mozilla, and Opera. On Mac: IE5.2, Safari, Firefox, Netscape 6/7, Mozilla, and Opera 7.5+.
How to use it
Usage is straight-forward and simple. Include the swfobject.js Javascript file, then use a small amount of Javascript on your page to embed your Flash movie. Here is some example code:
<script type="text/javascript" src="swfobject.js"></script>
<div id="yourcontent">
This text is replaced by the flash object
</div>
<script type="text/javascript">
var so = new SWFObject("test.swf", "mymovie", "400", "200", "8", "#FFFFFF");
so.write("yourcontent");
</script>
Here is a description of its parameters:
var so = new SWFObject(swf, id, width, height, version, background-color [, quality, xiRedirectUrl, redirectUrl, detectKey]);
Create a new SWFObject and pass in the required arguments:
- swf - The file path and name to your swf file.
- id - The ID of your object or embed tag. The embed tag will also have this value set as it’s name attribute for files that take advantage of swliveconnect.
- width - The width of your Flash movie.
- height - The height of your Flash movie.
- version - The required player version for your Flash content. This can be a string in the format of ‘majorVersion.minorVersion.revision’. An example would be: “6.0.65″. Or you can just require the major version, such as “6″.
- background-color - This is the hex value of the background color of your Flash movie.
Optional arguments are:
- quality - The quality you wish your Flash movie to play at. If no quality is specified, the default is “high”.
- xiRedirectUrl - If you would like to redirect users who complete the ExpressInstall upgrade, you can specify an alternate URL here.
- redirectUrl - If you wish to redirect users who don’t have the correct plug-in version, use this parameter and they will be redirected.
- detectKey - This is the url variable name the SWFObject script will look for when bypassing the detection. Default is ‘detectflash’. Example: To bypass the Flash detection and simply write the Flash movie to the page, you could add ?detectflash=false to the url of the document containing the Flash movie.
The latest version can be downloaded here
7 Comments so far
Leave a reply






Hey, thanks for posting this! I was wondering how to do that.
Thank you for the very useful and informative article. This can be a particularly tricky task, especially for new webmasters. It’s an important skill to master given the nature of modern web pages… I like the fact that you wrote a well thought-out, easy to understand, and concise set of instructions. Thanks!
Thanks! I’m glad you found it useful.
It’s a great code, but I have had problems using it with jquery “Thickbox”. Sometimes Thickbox works, sometimes it doesnt. When it does, the flash suddenly dissapears due to lack of transparent functions.
Simple question that must waste zillions of hours, that you could tack on the answer to and make this even more useful, IMHO.
If you embed a flash movie simply, the #1 way, why is it that a static html page will work fine, but if you return identical code from a perl script in the cgi-bin directory, it will not embed the flash movie. You can even save the “unembedded” page and load it, and the movie is there.
Thanks in advance…
Yeah, it’s almost as though you wrote it yourself. Why don’t you give the author some credit, Justin?
DvS,
To address your comment:
1) These are mostly facts and parameters to an application, so no credit is due.
2) I linked to the main site at the bottom. It’s pretty clear in my article who wrote it.