Embed Flash or Die Trying

Updated July 28, 2024 • 17 comments

[ Image: 50 Cent ]
Embed Flash or Die Tryin’ Web designers and developers looking to embed Flash content into a web page currently enjoy a wide variety of methods from which to choose. The most common methods vary along several key dimensions, including standards-compliance, user-friendliness, and universal support. Some methods make it easy to provide alternative content, others enable auto-activation of Flash content, while others feature plugin-detection functionality.

In an attempt to round-up the myriad techniques, this article presents nine of the most useful, practical, and popular methods for embedding Flash content.

Embed Element ↩

The quickest, easiest method for including Flash content in web pages requires only the embed tag. The embed tag is currently supported by all major browsers and does a fine job of displaying Flash content.

The (major) downside is that the W3C does not support the proprietary embed tag, ultimately resulting in invalid (X)HTML markup that is not standards-compliant. Also, this method fails to detect if the required version of Flash is installed before rendering content, possibly resulting in errors or broken pages. Further, as virtually all browsers support the embed tag, alternative content provided via the noembed tag fails to appear when the required Flash plugin is not installed. In such a case, the Flash content is replaced by an image-link of a broken puzzle piece that enables manual plugin installation.

Usage

Customize¹ this code and insert it into the <body> of your document:

<embed type="application/x-shockwave-flash" 
   pluginspage="http://www.adobe.com/go/getflashplayer" 
   width="333" height="333" src="path/flash_movie.swf" />
<noembed><p>Alternative content</p></noembed>

Notes

Object Element ↩

The W3C recommends using the standards-compliant object element to include Flash content on a web page. The non-proprietary object element validates as XHTML-strict and is compatible with all modern browsers. Further, the object element graciously supports alternative content, which may be included within the element itself (see example).

Usage

Every major, modern browser except Internet Explorer correctly interprets and utilizes the object tag and attributed MIME-type to include Flash content. In a perfect world, this would be all that one would need to properly embed Flash:

<object type="application/x-shockwave-flash" data="flash_movie.swf" width="333" height="333"> 
   <p>Alternative content</p> 
</object>

Unfortunately, it’s not a perfect world. Thus, we once again must reach out and coddle IE with its proprietary classid attribute, which equips the browser to load the requisite ActiveX control. Thus, this is the markup we must use for Flash presentation within Internet Explorer:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="333" height="333">
   <param name="movie" value="flash_movie.swf" />    
   <p>Alternative content</p>
</object>

Combining the two different object methods, we get something resembling the following:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="333" height="333">
   <param name="movie" value="flash_movie.swf" />
   <object type="application/x-shockwave-flash" data="flash_movie.swf" width="333" height="333">
      <p>Alternative content</p>
   </object>
</object>

..which may appear to be a reasonable solution, but falls short of satisfactory along several fronts¹. So, while we strive for standards-compliance Flash-support via a single, unified implementation of the object element, such idealism unfortunately remains just beyond our present reality. Fortunately, there are plenty of alternative solutions. For example, the next method explains how the use of IE conditional comments successfully enables us to embed Flash using only the object tag.

Notes

¹ Comparison of object Implementations
Objects, Images, and Applets
Inserting objects into HTML
Flash embed tag attributes
object – Embedded object
HTML object tag
The object Tag

Nested Objects (Dual Objects / object tags only) ↩

The "Nested Objects" method of embedding Flash content exchanges the invalid <embed> tag for a nested set of <object> tags. Using IE-specific conditional comments, this method delivers the parent object tag to Internet Explorer, while delivering the nested object tag to all "non-IE" browsers. Ignoring the unrecognized attributes of the parent object tag, non-IE browsers will correctly utilize the recognized attributes of the nested object tag.

This method requires no JavaScript, is standards-compliant, and functions on virtually every major modern browser. The code itself, although valid (X)HTML, is relatively bulky and provides no plugin detection, possibly resulting in broken content. Further, thanks to the Eolas patent dispute¹, this method requires IE users to "click-activate" the movie before it will play.

Usage

Customize² this code and insert it into the <body> of your document:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
      codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" 
      width="333" height="333" id="unique_id" align="middle">
   <param name="movie" value="path/flash_movie.swf" />
   <param name="quality" value="high">
   <param name="bgcolor" value="#fff">
   <!--[if !IE]>-->
   <object data="path/flash_movie.swf" type="application/x-shockwave-flash" 
         width="333" height="333"  id="unique_id" align="middle">
      <param name="pluginurl" value="http://www.adobe.com/go/getflashplayer">
      <param name="quality" value="high">
      <param name="bgcolor" value="#fff">
   <!--<![endif]-->
      <p>Alternate content goes here..</p>
   <!--[if !IE]>-->
   </object>
   <!--<![endif]-->
</object>

Notes

Twice Cooked (default Adobe Flash method) ↩

The "Twice Cooked" method is the default method used by the Adobe Flash IDE to embed Flash movies. This is by far the most popular and widely supported method for including .swf content into (X)HTML web pages. This method is not standards-compliant, provides no alternate content, and provides no plugin detection, possibly resulting in broken content. Further, this method requires IE users to "click-activate" the movie before it will play. Nonetheless, this method remains popular and is relatively simple to implement, requiring no additional JavaScript to function properly.

Usage

Customize¹ this code and insert it into the <body> of your document:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
      codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" 
      width="333" height="333" id="unique_id" align="middle">
   <param name="allowScriptAccess" value="sameDomain" />
   <param name="movie" value="path/flash_movie.swf" />
   <param name="wmode" value="transparent" />
   <param name="scale" value="exactfit" />
   <param name="quality" value="high" />
   <param name="bgcolor" value="#333" />
   <param name="menu" value="true" />
   <embed src="path/flash_movie.swf" name="unique_id" allowScriptAccess="sameDomain" 
      type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" 
      quality="high" bgcolor="#333" width="333" height="333" align="middle" />
</object>

This method provides support for the passing of variables to the Flash movie. Simply include the following parameters:

<param name="flashvars" value="variable=value&autostart=true" />
<embed ... flashvars="variable=value&autostart=true" ... />

Notes

Flash Satay ↩

Based on the generic object implementation, the "Flash Satay" method drops the invalid <embed> tag, manipulates various <object> tag parameters, and implements the use of a small container movie to load target Flash content. Any number of Flash movies may use the same container file, which may also receive and pass variables to the various target movies. This method requires no JavaScript, is standards-compliant, and functions on virtually every major modern browser. Keep in mind, however, that this method includes no innate Flash plug-in detection, which may result in broken or missing content. Further, this method requires IE users to "click-activate" the movie before it will play.

Usage (2 steps)

Step 1: Open a new Flash movie, place the following ActionScript into the first frame, and save the file as c.swf:

_root.loadMovie(_root.path,0);

Step 2: Customize¹ this code and insert it into the <body> of your document:

<object type="application/x-shockwave-flash" data="c.swf?path=movie.swf" width="333" height="333">
   <param name="movie" value="c.swf?path=movie.swf" />
   <img src="noflash.gif" alt="Alternate Image" />
   <p>Alternative content description</p>
</object>

Replace "movie.swf" with the name of your movie. The movie parameter will then pass the name of your target movie as a variable to the container file, which will then load and play the target movie itself. The container movie may be modified for additional functionality, but its file size must be kept small (within a few kilobytes).

Small Movie Satay (even easier)

For small Flash movies (e.g., small ads, decorative graphics, etc.), there is no need for the container movie. Simply customize and use this:

<object type="application/x-shockwave-flash" data="movie.swf" width="333" height="333">
   <param name="movie" value="movie.swf" />
</object>

Notes

¹ Flash Satay

FlashReplace ↩

FlashReplace by Robert Nyman is a JavaScript solution for including Flash content into a web page. FlashReplace works by replacing specified block-level placeholders with predefined Flash content. The script is extremely lightweight, weighing in at a mere 2.1 KB, and requires only one line of code to implement. FlashReplace also works fine with streaming Flash movies, and does not require users of Internet Explorer to "click-activate" Flash content. To ensure maximum browser support, FlashReplace employs the forbidden <embed> element, which unfortunately results in code that is not standards-compliant. Also, to keep the script as lightweight as possible, FlashReplace contains no support for Adobe Express Install. Overall, a very lightweight and flexible solution for delivering Flash content to the widest audience possible. Well done!

Usage (3 steps)

Step 1: Download¹ the FlashReplace script and copy to desired directory.

Step 2: Customize this code with the correct file path and insert it into the <head> of your document:

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

Step 3: Customize this block-element placeholder according to the variables listed below and place into the <body> of your document. The code may be placed in its target location within the document, at the bottom of the page, or even in an external JavaScript file:

<script type="text/javascript">
   FlashReplace.replace("elmToReplace", "src", "id", width, height, version, params);
</script>

FlashReplace parameters:

elmToReplace — the id of the element to be replaced with the movie
src — the path to the Flash movie (e.g., flash/my-movie.swf)
id — the id to be used for the Flash-movie element
width — the width of the Flash movie
height — the height of the Flash movie
version — (optional) specifies a required Flash version
params — (optional) open parameter for customization

It is also possible to include multiple Flash movies within the same JavaScript placeholder. This is useful if you are consolidating code in an external .js file. Here is an example that also demonstrates usage of the two optional parameters (version and params):

<script type="text/javascript">
<!--//--><![CDATA[//><!--

   FlashReplace.replace("header", "/flash/header-movie.swf", "flash-header", 777, 333);
   FlashReplace.replace("article", "/flash/article-movie.swf", "flash-article", 555, 333, 7, { wmode : "transparent" });
   FlashReplace.replace("footer", "/flash/footer-movie.swf", "flash-footer", 777, 333, 7, 
      {
         wmode : "transparent", 
         quality : "high", 
         bgcolor : "#fff" 
      }
   );

//--><!]]>
</script>

Notes

SWFObject ↩

SWFObject is a Javascript Flash-Player detection and embed script that detects Flash Player versions 3 and up on all major modern browsers. SWFObject is search-engine friendly, degrades gracefully, generates valid (X)HTML markup, and is forward compatible. SWFObject includes an Adobe Express Install feature and provides automatic ActiveX control activation, so visitors do not need to "click-activate" Flash content. There is even a SWFObject extension available for Flash MX 2004 and Flash 8¹. SWFObject works great in both HTML and (X)HTML documents, but only when pages are sent as "text/html" (not "application/xhtml+xml").

Usage (4 steps)

Step 1: Download SWFObject from the SWFObject Home Page² and copy to desired directory.

Step 2: Insert this function call into the document <head>:

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

Step 3: For each movie object, customize² and insert this code into the <body> of your document:

<div id="unique_element_id">
   <p>This is the alternate content that will be replaced by the Flash content.</p>
   <p>Include a link to <a href="path/doc.html?detectflash=false">bypass the detection</a>.</p>
   <p>This alternate content is for users without the Flash plugin or without Javascript enabled.</p>
   <p><strong><a href="http://www.adobe.com/go/getflashplayer">Upgrade your Flash Player<a/>.</strong></p>
   <p><noscript> content is not required unless you want to support users with the Flash plugin but without JavaScript.</p>
</div>

Step 4: For each movie object, customize² and insert this code directly below the previous code:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
   var so = new SWFObject("path/movie.swf", "unique_movie_id", "333", "333", "7", "#777");
   so.write("unique_element_id");
//--><!]]>
</script>

Here are some additional, optional variables (for additional variables and complete details, visit the SWFObject Home Page²):

   so.addParam("salign", "t");            // alignment parameter
   so.addParam("quality", "high");        // movie quality setting
   so.addParam("scale", "noscale");       // used for full-screen movies
   so.addParam("wmode", "transparent");   // player transparency setting
   so.addVariable("variable1", "value1"); // pass variable to Flash movie
   so.addVariable("variable2", "value2"); // pass variable to Flash movie
   so.useExpressInstall('path/expressinstall.swf'); // Adobe Express Install - requires "expressinstall.swf" file
   so.setAttribute('xiRedirectUrl', 'http://example.com/upgrade-finished.html'); // redirect after express install - must be abs url
   so.addVariable("variable1", getQueryParamValue("variable1")); // to pass "http://example.com/page.html?variable1=value1"

Notes

¹ SWFObject Publish Profile Extension
² SWFObject Home Page
SWFObject Forum

UFO ↩

UFO (Unobtrusive Flash Object) employs JavaScript to detect the Flash plug-in and embed Flash movies. UFO is free to use and supports virtually all major modern browsers. UFO produces valid (X)HTML code and compliments accessible, seo-friendly websites. Highly customizable, UFO supports multiple, differently configured Flash movies and provides excellent support for Adobe Express Install functionality¹. UFO also provides automatic ActiveX control activation, so visitors do not need to "click-activate" Flash content. Plus, UFO works great in both HTML and (X)HTML documents when pages are sent as either "text/html" or "application/xhtml+xml". Nice. :)

Usage (3 steps)

Step 1: Download the UFO JavaScript from the UFO Home Page¹ and copy to desired directory.

Step 2: Customize¹ and insert this code into the <head> of your document:

<script type="text/javascript" src="ufo.js"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
   var FO = { movie:"movie.swf", width:"333", height:"333", majorversion:"8", build:"0" };
   UFO.create(FO, "unique_id");
//--><!]]>
</script>

Step 3: Customize this block-element placeholder with alternate content and place into the <body> of your document:

<div id="unique_id">
 <p>Replacement content goes here.</p>
 <p>
  <a href="http://www.macromedia.com/go/getflashplayer">
   <img src="http://www.macromedia.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Flash Player" />    
  </a>
 </p>
</div>

To prevent undesirable or unusual presentational behavior during page/movie download, add the following CSS styles to the document <head> and placeholder element, respectively:

<style type="text/css">
    #ufoDemo { visibility: hidden; }
</style>

<div id="ufoDemo" style="visibility:visible;">
 <p>Replacement content goes here.</p>
</div>

Here are some additional, optional general parameters (for additional parameters and complete details, visit the UFO Home Page¹):

id, base, play, loop, name, menu, scale, align, salign, quality, wmode, bgcolor, flashvars, devicefont, swliveconnect, allowscriptaccess, seamlesstabbing, allowfullscreen

Here are some additional, optional UFO-specific parameters (for additional parameters and complete details, visit the UFO Home Page¹):

xi:"true" - enable Adobe Express Install support
ximovie:"[URL of express install Flash movie, ufo.swf]" 
xiwidth:"[width of customized express install Flash movie]" 
xiheight:"[height of customized express install Flash movie]" 
xiurlcancel:"[URL of cancel page]" 
xiurlfailed:"[URL of failed page]" 
setcontainercss:"true" - use for full-screen Flash content

You can use the optional xiurlcancel and xiurlfailed parameters to route express install cancellations and failures to separate URLs. You also have the option customize the express install Flash movie.

Notes

¹ UFO Home Page

SWFFix/SWFObject ↩

SWFFix (Update: “SWFFix” was renamed “SWFObject”)¹ is a recently released JavaScript library featuring standards-compliant markup, Flash-version detection, and Express-Install support. SWFFix uses the nested-objects method to optimize cross-browser support, deliver alternate content, and facilitate graceful degradation. SWFFix “fixes” the issues commonly associated with the nested-objects method (e.g., the click-to-activate requirement of IE6 and Opera 9+), providing greater functionality and a richer user experience. SWFFix also features dynamic embedding of Flash content for (X)HTML documents. Best of all, the SWFFix library consists of a single, extremely lightweight JavaScript file — only 12KB (unzipped) or 3.4KB (gzipped)! This could be the one, folks!

As mentioned, there are two ways to include Flash content via SWFFix. The first method ensures delivery of Flash content even when JavaScript is unavailable. The second method requires JavaScript to dynamically embed Flash content via the DOM. First we will outline the “JavaScript-independent” method, and then proceed with the “dynamic-inclusion” method.

JavaScript-independent method — Usage (4 steps)

Step 1: Download the SWFFix library² (and Express Install files, if needed) and copy to desired directory.

Step 2: Embed both Flash content and alternative content using standards-compliant markup (edit as needed):

<body>
   <div>
      <object id="targetID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="movie" align="left" width="333" height="333">
         <param name="movie" value="movie.swf" />
         <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data="movie.swf" width="780" height="420">
         <!--<![endif]-->
         <p>Alternative content (e.g., you can have a richer experience by downloading the Flash plugin)</p>
         <!--[if !IE]>-->
            </object>
         <!--<![endif]-->
      </object>
   </div>
</body>

Step 3: Include the SWFFix JavaScript library in the <head> of your (X)HTML document (edit as needed):

<script type="text/javascript" src="http://domain.tld/js/swffix.js"></script>

Step 4: Register your Flash content with the SWFFix library and add to the <head> of your (X)HTML document (edit as needed):

<script type="text/javascript">
   SWFFix.registerObject("targetID", {swfversion:"9.0.0", expressinstall:"expressInstall.swf"});
</script>

In the previous code, we are using the following parameters:

The first parameter is the target id of the <object> used for the movie.
The second parameter is an object that may contain two name:value pairs
swfversion version of Flash Player required to display the content.
expressinstall specifies the URL of the Express Install file (if used).

Multiple Flash Movies via JS-Independent Method

To include multiple Flash movies using the previously described “JavaScript-independent” method, repeat steps 2 and 4 for each additional Flash movie.

Dynamic-inclusion method — Usage (4 steps)

Whereas the previous method of inserting Flash content requires a pre-coded <object> construct, the dynamic method of embedding Flash replaces a target-container block-element such as a <div> with the required <object> markup. Simply predefine the required object attributes and parameters and the code is inserted dynamically. Of course, because this method requires JavaScript, users without it will not see your Flash content. Having said that, here is how to do it:

Step 1: Download the SWFFix library² and copy to desired directory.

Step 2: Include the SWFFix JavaScript library in the <head> of your (X)HTML document (edit as needed):

<script type="text/javascript" src="http://domain.tld/js/swffix.js"></script>

Step 3: Define the <object> attributes, <param> elements, and target id in the following code, and then copy to the <head> of your document:

<script type="text/javascript" src="http://domain.tld/js/swffix.js"></script>
   <script type="text/javascript">
      if (SWFFix.hasFlashPlayerVersion("9.0.0")) {
         var fn = function() {
            var att = { data:"movie.swf", width:"333", height:"333" };
            var par = { flashvars:"foo=bar" };
            var el  = document.getElementById("targetID");
            SWFFix.createSWF(att, par, el);
         };
         SWFFix.addDomLoadEvent(fn);
      }
</script>

In the previous code, SWFFix.createSWF(attributeObj, paramObj, toBeReplacedElem) requires three arguments:

attributeObj — contains the <object>’s attributes in name:value pairs
paramObj — contains any nested param elements in name:value pairs
toBeReplacedElem — specifies the target id of the (X)HTML element that will be replaced with your Flash movie

Step 4: Add to the <body> of your (X)HTML document (edit as needed):

<body>
   <div id="targetID"><p>Alternative content (e.g., you need both JavaScript and Flash..blah blah blah..)</p></div>
</body>

Multiple Flash Movies via Dynamic-Inclusion Method

To include multiple Flash movies using the previously described “dynamic-inclusion” method, simply repeat steps 3 and 4 for each additional Flash movie.

Notes

About the Author

Jeff Starr = Web Developer. Book Author. Secretly Important.

17 responses to “Embed Flash or Die Trying”

Armand 2008/05/01 10:17 am

Excellent article, it helped me a lot!
Thanks!
Perishable 2008/05/04 7:18 am • Post Author

My pleasure — glad to be of service! :)
Ken 2008/05/16 12:26 pm

Amazing work! This must have taken forever to put together. Thanks!
Perishable 2008/05/18 7:07 am • Post Author

Yes, it did, actually, but I certainly learned a lot in the process ;) Thank you for the positive feedback!
hussam 2008/05/25 5:06 am

Thanks a lot for this amazing effort
Perishable 2008/05/25 6:24 am • Post Author

Absolutely my pleasure :)
Don 2008/05/31 7:48 pm

No doubt. I’ve been in the dark about a lot of this for some time now. Fantastic job, no kidding.
Perishable 2008/06/01 1:32 pm • Post Author

Thanks, Don! Happy to help :)
Robbo 2008/06/16 10:22 am

Great stuff! Thanks – very helpful.

Being somewhat noobish about all this – which of the above examples would you recommend to achieve this final result:

A banner with a static logo – which plays a random selection of short Flash movies (converted from video).

I’m thinking Flash Replace is the way to go – but I’m unsure how to get it to randomly select from a collection of Flash movie files.

Hope you can help. Thanks again.

Cheers.
Perishable 2008/06/17 10:16 am • Post Author

Hi Robbo, I’m not sure what your experience level is, but you could easily accomplish something like this with a little PHP and just about any of the above methods. Here is an article on easy image randomization via PHP. The method targets image files, but is easily adapted to just about any file type.
aaron 2008/10/02 2:11 pm

Thanks so much for this..
Bulk sms 2009/01/18 12:47 am

This is my first time when I am visiting your page. Believe me I am thrilled to see such a innovative lay out of yours. Simply amazing and eye catching.

Your page will remain in memory for long and we can easily recognise your page when it will come next time in front of our eyes.

Hats off to you.