Display Alternate Content instead of Flash

1

I want my site to display properly for iPhones and other smart phones that cannot display flash content.

I am trying to have the web browser display alternate content if Flash is not available. I have found SWFobject to be the best so far, but I have one issue with this. The site seems to function normally in both Safari and Firefox, but not IE. Safari and Firefox display the flash fine and if I disable the flash pluginit displays the image I have specified, but Internet explorer (both 7 and 8) will only show the image and ignore the flash.

Here is my code:

<script type="text/javascript" src="http://redtablegroup.com/js/swfobject.js"></script>

<object width="641" height="281" id="myFlashContent">
				<param name="movie" value="http://www.xxx.com/wp-content/uploads/sample.swf" /><param name="wmode" value="transparent"> <param name="quality" value="high" /><param name="scale" value="noscale" />
				<!--[if !IE]>-->
				<object type="application/x-shockwave-flash" data="http://www.xxx.com/wp-content/uploads/sample.swf" width="641" height="281">
				<!--<![endif]-->
					<img src="http://www.xxx.com/images/about-header.jpg" alt="About XXX" />
				<!--[if !IE]>-->
				</object>
				<!--<![endif]-->
			</object>

I came across another Flash Satay code, but this broke the flash playback all together in all browsers:

<!--[if !IE]> -->
<object type="application/x-shockwave-flash"
  data="http://www.redtablegroup.com/wp-content/uploads/rtg-about-as3.swf" width="641" height="281">
<!-- <![endif]-->

<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
  width="641" height="281">
  <param name="movie" value="http://www.redtablegroup.com/wp-content/uploads/rtg-about-as3.swf" />
<!--><!--dgx-->
  <param name="movie" value="http://www.redtablegroup.com/wp-content/uploads/rtg-about-as3.swf" />
  <param name="wmode" value="transparent">
  <param name="quality" value="high" />
  <param name="scale" value="noscale" />

  <p><img src="http://redtablegroup.com/images/about-header.jpg" alt="About Red Table Group" /></p>
</object>
<!-- <![endif]-->

I dont think this really matters but I am doign this in static wordpress pages… keep in mind I have other items working in these pages with no issues… this includes PHP scripts as well as other items… and I have Wordpress setup to not edit the code I place. Although I thought I should pass this info along.

Can someone point me to some sample code that has been tried and true… I can’t figure out what is wrong…