How to add a Flash file to your HTML page

Written by: Profacgillies • Edited by: Simon Hill
Published Feb 15, 2010 • Related Guides: HTML | YouTube

Flash is a very popular web technology. The question for many web users is how to code a Flash slideshow in an HTML file. Be warned! The code supplied by some applications is not standards compliant and may upset some browsers and raise accessibility issues.

The <object> HTML Tag

The <object> tag is used to include a wide range of objects within HTML pages. It was originally intended as a universal tag to include all images, audio and video clips, Java applets, ActiveX elements, PDF and Flash files. According to the W3C documentation, it has been dogged by browser incompatibility issues and this has led to the retention of discrete tags such as img for images. It has also created confusion over how to code a flash slideshow in an HTML file.

How to Code a Flash Slideshow In An HTML File

The following code was suggested by a Flash authoring application that I used as suitable for embedding a Flash slide show entitled slide 3 in a web page:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"

ID=slide3 WIDTH=800 HEIGHT=480>

<PARAM VALUE="slide3.swf">

<PARAM VALUE=high>

<PARAM VALUE=false>

<EMBED src="slide3.swf" loop=false quality=high

WIDTH=800 HEIGHT=480 TYPE="application/x-shockwave-flash"

PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">

</EMBED>

</OBJECT>

This traditional coding was suggested because there is both an <embed> tag and an <object> tag. The <object> tag was recognized by Internet Explorer, and Netscape browsers recognize the <embed> tag and ignore the <object> tag.

The final Flash file can be viewed at http://www.avergo.at/vision/slide3.html.

However, this code generated no less than 51 errors when validated using the W3C compliance checker against modern XHTML standards.

Similarly, currently, the code for embedding a YouTube video is offered as:

<object width="425" height="344">

<param name="movie" value="http://www.youtube.com/v/jV9YM3gNKOU&hl=en_GB&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>

<embed src="http://www.youtube.com/v/jV9YM3gNKOU&hl=en_GB&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344">

</embed>

</object>

How to Code a Flash Slideshow in an HTML File and maintain W3C compliance

A much leaner coding schema is needed to achieve compliance. The following code appears to do the job, maximising browser compatibility and compliance with XHTML Strict:

<object type="application/x-shockwave-flash" data="slide3.swf" width="800" height="480">

<param name="movie" value=" slide3.swf" />

</object>

This coding removes the need for an <embed> object altogether and works even if there is no slide3.gif file present.

For a YouTube movie, the equivalent lean code looks like this:

<object type="application/x-shockwave-flash" style="width:425px; height:350px;"

data="http://www.youtube.com/v/jV9YM3gNKOU">

<param name="movie" value="http://www.youtube.com/v/jV9YM3gNKOU" /></object>

Or if you want to test it, cut and paste the following complete HTML page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>My Lean Embedded YouTube Movie</title>

<meta name="created" content="Sun, 14 Feb 2010 22:23:53 GMT" />

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<meta name="description" content="" />

<meta name="keywords" content="" />

</head>

<body>

<object type="application/x-shockwave-flash" style="width:425px; height:350px;"

data="http://www.youtube.com/v/jV9YM3gNKOU">

<param name="movie" value="http://www.youtube.com/v/jV9YM3gNKOU" /></object>

</body>

</html>

These code routines have been tested with modern versions of Internet Explorer and Firefox, as well as validated using the W3C validator, and should ensure maximum compatibility and accessibility for your pages.