How to show an image instead of SWF content for mobile Safari iOS visitors

Do you have Flash (.swf) content you want to show for desktop visitors but need to show an image for visitors who are seeing your site on mobile Safari because Apple doesn’t support Flash? Since this took me waaay too many hours to find and figure out this elegant solution, I want to share this for others who may be searching – as well as for my own future reference.

Usually, a swf is shared with an < object > and < embed > code such as this:

[xml]<object type="application/x-shockwave-flash" data="your-movie.swf" width="300" height="200">
<param name="movie" value="your-movie.swf" />
<param name="quality" value="high">
<param name="BGCOLOR" value="#FFFFFF">
<param name="menu" value="false">
<embed src="your-movie.swf" quality="high" bgcolor="#ffffff" width="315" height="188" name="movie name" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</object>
[/xml]

Including the embed code is what shows a missing plugin icon to iOS visitors, so we’re going to remove that and replace it with image code.
Missing Plugin Icon

Here’s how you can share Flash content to desktop visitors and a replacement image to iOS visitors who are seeing your site on iPhone, iPod or iPad in two simple steps:

1. Remove the embed code to hide the missing Flash content from iOS visitors:
[xml] <embed src="your-movie.swf" quality="high" bgcolor="#ffffff" width="315" height="188" name="movie name" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed><br />
[/xml]

2. Insert the following image code to show an image as replacement for the Flash content:
[xml] <img src="replacement-image.jpg">
[/xml]

(You can add image dimensions and any other variables commonly associated with img src.)

Here is the final code:
[xml] <object type="application/x-shockwave-flash" data="your-movie.swf" width="300" height="200">
<img src="replacement-image.jpg">
<param name="movie" value="your-movie.swf" />
<param name="quality" value="high">
<param name="BGCOLOR" value="#FFFFFF">
<param name="menu" value="false">
</object>
[/xml]

That’s it!

Simple, elegant and… it works.

Thank you to tracknut for inspiring me to use img src within the object code. (I know it wasn’t their intention, but after seeing their message, I thought I’d give it a try and it worked!)

If you would like to see a working example, here is a link to my client’s site where I implemented this solution. Her site uses 2 swf animations – one in the sidebar and one on her home page just above her page text. iPhone, iPod & iPad visitors see an image rather than the animation.

Leave a Comment