Flash videos look nice on a website, but unfortunately not all browsers (such as Safari) will display Flash. Normally you can have a message display when flash fails to load. However, this impacts the look and feel of your website. Instead of showing an error message by default, consider displaying a default image when the flash video does not load. The default image can be a snapshot of the video so that you retain some of the visual effect on your website.

Showing an Image When FlashVideo Does Not Load

The typicalembed code for flash looks something like this…

[jbox color=”yellow”][swf src=”http://www.samplevideourl.swf” height=”214″ width=”610″]Error text goes here and displays if the video does not.[/swf][/jbox]

To display an image instead of an error message, put the image html code into the space where the text normally appears. The image you are linking to must be stored online somewhere as you will need to enter the url for that image.

[jbox color=”yellow”][swf src=”http://www.samplevideourl.swf” height=”214″ width=”610″]<img src=”http://imageurl.jpg”>[/swf][/jbox]


Hyperlinking a Default Image

Now let’s take it one step further and add a hyperlink the image. This allows viewers to click on the default image in order to access a particular web page. For example, if your image is related to a product or service, you can link to a web page that provides further details.

To insert a hyperlink, place the appropriate html code into the space where the default text normally appears. In the sample below, the purple text represents where the code from above that inserts the image. The red text is the additional code needed to hyperlink that image to a website url.

[jbox color=”yellow”][swf src=”http://www.samplevideourl.swf” height=”214″ width=”610″]<a href=”http://urltolinkto.com/”><img src=”imageurl.jpg”></a>[/swf][/jbox]


End Result

By using the code above, you can show an image when a flash video does not load. Flash-enabled browsers will automatically display your flash video. Other browsers will display the static image and allow visitors to click on that image and access the website that you designated. Your website will now appear somewhat consistent regardless of the browser than a visitor may use to access your web page!