What's the ultimate way to embed Flash (swf) files to HTML (and XHTML) documents?

Asked 7/7, 2010 at 13:13 Answered 5/8, 2010 at 19:30

Like most people I use SWFObject to embed Flash (swf) files to my Web projects.

As you know SWFObject offers 2 ways to embed Flash: Static publishing and Dynamic publishing.

Static publishing uses regular markup to embed the file to the document and also do checks with JavaScript that you can't make with regular markup alone. This is good as if you have customers that can't have JavaScript turned on (search engines, some portable devices...), the file will still show up (if they have the correct Flash plug-in installed). But if you have people on legacy/unpatched Internet Explorer (between April 2006 and April 2008) they will have the dreaded "click to activate" to interact with the Flash.

Dynamic publishing uses JavaScript to embed the Flash. This will get rid of the "click to activate" feature on old IE but if JavaScript is off the Flash will not be there at all.

Both methods have its advantages and inconvenients. In an utopic world we would all use the dynamic publishing method, but we (or at least some of us like me) are stuck with customers using really old systems with IE 6 (they would like to upgrade but they can't because of badly designed software that would cost 10K+$ to upgrade). I need to support legacy IE and want to get rid of the "click to activate" feature while supporting people with JavaScript off.

What about combining static and dynamic publishing methods? What about something like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>SWFObject 2 static+dynamic publishing example page</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <script type="text/javascript" src="swfobject.js"></script>
        <script type="text/javascript">
        swfobject.embedSWF("test.swf", "myContent", "300", "120", "9.0.0", "expressInstall.swf");
        </script>
    </head>
    <body>
        <div id="myContent">
            <object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="120">
                <param name="movie" value="test.swf" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="test.swf" width="300" height="120">
                <!--<![endif]-->
                <div>
                    <h1>Alternative content</h1>
                    <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
                </div>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </div>
    </body>
</html>

I showed that to an integrator and he told me I should use <object> and <embed> tags...

What would be the ultimate way to embed Flash to Web projects? A solution that:

Will work with JavaScript off (Flash embedded in alternate content)
Will pass the W3C validator
Will remove the "click to activate" on legacy/unpatched IE
Will use the Flash detection/auto-install of SWFObject

EDIT: Added bounty. Please, I don't want to see answers like "don't bother no one have JavaScript off nowdays" or "if javascript is off most likely Flash will be off too".

EDIT 2: The answer I'm looking for is the best way to embed Flash statically (with regular HTML tags). Over that, I will add dynamic publishing. Something like this that will work in all major browsers since IE 6 and that will pass W3C validation.

Destinydestitute answered 7/7, 2010 at 13:13 Comment(6)

Static publishing uses, not Static publishing use. Dynamic publishing uses, not Dynamic publishing will use to maintain tense. – Bold 7/7, 2010 at 13:19

Fixed! I'm doing my best as English is not my main language :) – Destinydestitute 7/7, 2010 at 13:27

Is using <script>/<noscript> to include both approaches along the right lines? – Plasmolysis 15/7, 2010 at 0:15

If needed yes, but I don't see the use since you embed the Flash statically with regular tags and add over that script to add features. The noscript would be useless since the Flash is already there even without script (if you have the plug installed). – Destinydestitute 15/7, 2010 at 18:40

Surely the "best" way to do it would be the way Adobe recommends in that article? Specifically: adobe.com/devnet/flashplayer/articles/swfobject_05.html – Hermaphrodite 16/7, 2010 at 11:12

and where is <embed> tag?! in my opinion you can add <embed> for more compatibility – Robers 31/10, 2016 at 7:31

Here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <title></title>
        <script type="text/javascript" src="swfobject.js"> </script>
        <script type="text/javascript">
            swfobject.embedSWF('test.swf', 'myFlash', '320', '240', '9.0.0', '/swfobject/expressInstall.swf', 0, 0, 0);
        </script>
    </head>
    <body>
        <div>
            <object id="myFlash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="320" height="240">
                <param name="movie" value="test.swf">
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="test.swf" width="320" height="240">
                <!--<![endif]-->
                    <p>Version ???</p>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </div>
    </body>
</html>

I combine the static and dynamic methods of SWFObject
The static part is using the nested-objects method

Destinydestitute answered 5/8, 2010 at 19:30 Comment(1)

Thx, I like your approach. Additionally I use the CDN source: <script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> – Gharry 5/4, 2013 at 15:58

<head>
    <script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> 
    <script>
    var flashVars = {};
    var params = {};
        params.allowScriptAccess = "always";
        params.allowFullScreen = false;
        params.bgcolor = "#1a1a1a";
        params.wmode = "opaque";

        var atts = {};
        atts.id = "my-swf";

    swfobject.embedSWF("my.swf", "my-swfobject", "100%", "100%", "10.1.0", "playerProductInstall.swf", flashVars, params, atts);
    </script>
</head>
<body>
    <div id="my-swfobject">
        <!-- Any <object></object>, <embed></embed>, and everything else here will be rendered for users without JavaScript. If JavaScript is on, SWFObject will destroy div#my-swfobject and replace it with object#my-swf. -->
    </div>
</body>

Let me know if this is what you're looking for. I can elaborate more if needed. You might also consider suggesting that your IE6 slaves install Google Chrome Frame: http://code.google.com/chrome/chromeframe/

Settling answered 14/7, 2010 at 23:52 Comment(7)

No it's not what I'm looking for (it's dynamic only). I'm looking for the best way to embed Flash statically (with regular tags). I will add over that dynamic publishing. Chrome Frame can solve a lot of things, but I find that running a browser in a browser is somewhat fuzzy :) I would rather tell them to install Chrome and run it from there – Destinydestitute 15/7, 2010 at 12:23

It's not dynamic only, you're supposed to put the html code for the static plug-in inside <div id="my-swfobject"></div>. If the user has javascript enabled SWFObject will replace that code with generated code, otherwise the static code inside the div will run. – Superfluid 15/7, 2010 at 17:12

Yes I know but I'm looking for the best static way to do it (see Edit 2). – Destinydestitute 15/7, 2010 at 18:41

Alex -- the best static way happens to be the only static way. See an implementation example here: kb2.adobe.com/cps/415/tn_4150.html The code I posted is dynamic with a place for a static fallback. This is the preferred method because it gracefully degrades for those with JavaScript disabled. Put your static code inside div#my-swfobject and you will find that ANYTHING you place there is rendered as if SWFObject was never loaded (because it wasn't). – Settling 15/7, 2010 at 21:40

AlexV, this solution is a good one that meets your requirements. – Sphygmomanometer 16/7, 2010 at 1:29

Thanks for shorting me on the bounty! Maybe you can explain in more detail why my solution doesn't meet your needs. Are the tags invalid HTML? Does it not work in a particular browser? – Settling 16/7, 2010 at 18:42

The solution you've posted is the same (but less complete) than the exact one in my OP... – Destinydestitute 5/8, 2010 at 12:17

Here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <title></title>
        <script type="text/javascript" src="swfobject.js"> </script>
        <script type="text/javascript">
            swfobject.embedSWF('test.swf', 'myFlash', '320', '240', '9.0.0', '/swfobject/expressInstall.swf', 0, 0, 0);
        </script>
    </head>
    <body>
        <div>
            <object id="myFlash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="320" height="240">
                <param name="movie" value="test.swf">
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="test.swf" width="320" height="240">
                <!--<![endif]-->
                    <p>Version ???</p>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </div>
    </body>
</html>

I combine the static and dynamic methods of SWFObject
The static part is using the nested-objects method

Destinydestitute answered 5/8, 2010 at 19:30 Comment(1)

Thx, I like your approach. Additionally I use the CDN source: <script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> – Gharry 5/4, 2013 at 15:58

What I've done in the past is statically put my flash content in a div (using both object and embed tags), and then have SWFObject overwrite the contents of that div when it loads. This will be as close to what you want to do as you can get.

Skivvy answered 9/7, 2010 at 16:55 Comment(1)

This is what I want to do, but I'm looking for the best (static) way to embed Flash... – Destinydestitute 9/7, 2010 at 17:5

Go with dynamic publishing. If the user has javascript turned off, give up. They won't want Flash to run either.

Garibull answered 7/7, 2010 at 13:15 Comment(2)

Yeah but AFAIK with dynamic publishing your Flash content is not indexed by (at least some) search engines. In my case I have customers stuck with old IE. Some others not, I would like to take the best of all worlds (even if it's meaning more work for me). – Destinydestitute 7/7, 2010 at 13:19

Yes I did want Flash to run when I used NoScript in my old Firefox profile. What I didn't want was annoying ads and bad usage of Flash. – Plaided 14/7, 2010 at 21:26

Is there a way to get your clients to install another browser (like Firefox) alongside their legacy one, and use IE6 for the legacy app and FF for yours?

Wismar answered 14/7, 2010 at 23:43 Comment(2)

Yes that's a solution which can be applied with some pain (deployment and training). But I'm not asking how to avoid this problem. I truly want to know the ultimate way to embed Flash (It's more curiosity than real use). – Destinydestitute 15/7, 2010 at 12:19

There is no "ultimate" way to embed Flash. Just use whatever works best for your situation. – Storfer 16/7, 2010 at 13:36

I would take a cue from sites such as YouTube that allow embedding of Flash. Not sure if this will work for non "movie" types.

From YouTube:

<object width="[width]" height="[height]">
<param name="movie" value="[Path to SWF]"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="[Path to SWF]" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="[width]" height="[height]"></embed>
</object>

Storfer answered 15/7, 2010 at 18:38 Comment(0)

the only way i see, is doing something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>test</title>
</head>
<body>
    <p>
        <object width="160" height="112" data="movie.swf" type="application/x-shockwave-flash">
            <param name="movie" value="movie.swf" />
        </object>
    </p>
</body>
</html>

there is no better option i think. this will work in IE , Mozilla and Webkit browsers and is xhtml valid. but there is no flash installer and no replacement.

Speaking answered 16/7, 2010 at 13:1 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags