Embedding Valid Flash With The Object Tag

View Demo

I'm almost hesitent to give this one up. This took me forever to get this right! And by "right", I mean, it works perfect in every browser, it's valid, it's not dependent on javascript to work, it shows alternate content in all browsers when there is no flash plugin, and it removes the click to activate in IE and Opera. Each independent solution "can" be found on the web - it's just a matter of putting all the correct pieces of the puzzle together. Well, thats what I did here! I simply took the time (a lot of it by the way) and put the puzzle together! It's clean, it's simple, and most importantly, it's not dependent on anything other than these two small code snippets below! I believe, I've put together the best, and easiest, method of embedding flash that you will find anywhere on the web. Directly below is code you will need to embed the flash. I originally found this piece of the puzzle at swfObject (i.e. static publishing method).

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="500" height="500">
<param name="movie" value="flash.swf">
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="flash.swf" width="500" height="500">
<!--<![endif]-->
<p><a href="http://www.adobe.com/go/getflashplayer">Install Adobe Flash For Richer Experience</a></p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>

A little explanation: The first object tag is being feed to IE, the second object tag is being feed to FX, Safari, Opera, & Chrome, and the alternate content is being feed to all of them. To customize and add different attrubutes to the object tag, read here and here. As an aside, by default, flash plays at the quality setting of "high". So unless you want different, there's no need to specify. Also, in my example, I put the height and the width of the object tag in the CSS. Just view the source code - it will all become very clear!

Ok, on to deactivating the "click to activate" problem in IE and Opera. Yes, I'm aware microsoft is phasing out the click to activate problem. But, that doesn't mean it's gone! I'm a perfect example - it's still on my computer! I still have to click to activate in IE and Opera. Just like many others, I don't have automatic updating enabled in my version of IE. So to be on the safe side, I believe, same as others, that it's still nessesary to include the fix for this little problem.

So anyways, on to the script. I found the script here at La Trine. But if you look, you'll see I had to change quite a few things. For one, I removed the IE CC's because we need Opera to see and use this script also. Second, I removed the defer="defer" in the link (which tells the script to execute after the page has finished loading), because IE is the only browser that understands the defer attribute (Opera does not). Third, I put the script at the bottom of the page just above the body tag. Reason being, the flash needs to be loaded before the script is executed by the browser in order for it to work. And finally, as a side note, in order for this script (and all others of it's kind) to work, it needs to be an external script. Don't ask me why, an inline script will not work, thats just the way it is. I think I covered everything (finally), so here is the extremely small script!

// no click to activate in IE and Opera
var objects = document.getElementsByTagName("object");

function eolas(i)
{
    objects[i].outerHTML = objects[i].outerHTML;
}

for (var i=0; i<objects.length; i++)
    window.setTimeout("eolas(" + i + ")", 1);

Now link to the script and place it at the bottom of the page just above the the body tag like so.

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

Now go play and test it out! But if your diligent, you'll want to test with "flash off" also in order to test your alternate content. This tutorial wouldn't be complete unless I told you how to do that. So here is how you turn flash off in all of the major browsers. Your Welcome - enjoy!

Internet Explorer 7: Menu: Tools > Internet Options > Program Tab > click button: Manage add-on > Drop down box > select "Add-ons that run without requiring permission" > select Shockwave Object > click Enable/Disable button at bottom > refresh browser
Firefox 3: Menu: Tools > Add-ons > Plugins tab > Select Shockwave Flash > Enable/Disable
Safari 3: Menu: Edit > Preferences > Security tab > Web content: check Enable plug-ins > close window > refresh browser
Opera 9.5: Menu: Tools > Quick Preferences > Enable Plug-Ins > refresh browser

ADVERTISE HERE