Adding QuickTime movies to iWeb is really easy. I just drag&drop them and they show up. But what about flash content? flash movies? And what about integrating into iWeb movies I store on an external server (external reference)?

How to add videos with HTML5 in iWeb so they can be played on the iPad, the iPhone and the iPod Touch too is described here.

Chapter 1: Multiple Quicktime movies. How do I manage them best?

Chapter 2: Movies display as Q instead of movies?

Chapter 3: Storing Flash files and other content on your iDisk

1. (skip this chapter if you’re not interested in that)
   

Chapter 4: Storing Flash files and other content on non-MobileMe

1. (skip this chapter if you’re not interested in that)
   

Chapter 5: Integrating video to iWeb

1. (should work for Internet Explorer too)
   

2. - WMV
   

3. - QuickTime (If drag&Drop doesn’t work)
   

4. - FLV
   

5. - SWF
   

6. - Real
   

Chapter 6: Flash video player

Chapter 7: How to embed videos with HTML5 (for iPhone, iPad, ...)

Chapter 1: Multiple Quicktime movies. How do I manage them best?

Having multiple Quicktime movies on the same page isn’t a good idea especially if their filesize (Megabytes) is larger due to to the fact that they would load very slowly and take a long time to load.

A solution would be to have a page for each movie. It works better than having them all on one page but you end up with a lot of pages.

The best solution would be to use a PhotoPage. PhotoPages work the same way with movies as they do with photos. You will have the overview page, the page with the little thumbnails displaying at the top and the movie playing and there’s also the slideshow page where all movies play one after the other.

Chapter 2: Movies display as Q instead of movies?

The Q means that the movie is loading. If you don’t want the Q and want the progress bar instead (sometimes also referred to as quick start)

Open the file using QuickTime Pro.

From the File menu choose "Save As..." and pick the Desktop as the save location so you don't have to rename the file.

(This was suggested by QuickTimeKirk on the Apple Discussion Forum)

Chapter 3: Storing Flash files and other content on your iDisk (skip this chapter if you’re not interested in that)

1. Create a folder in your iDisk/Web/Sites folder.

2. Name it something like 'files' or ‘movies’ or whatever

3. Copy your .flv or any other file to that folder

4. web.me.com/username/nameofthefolder/nameofthefile.extension is the address at which the file will be stored on the web

Example: http://web.me.com/username/movies/nameofthefile.flv

Substitute the red url in the codes of Chapter 5 with that one modified to fit your case

Chapter 4: Storing Flash files and other content on non-MobileMe (skip this chapter if you’re not interested in that)

1. Create a new folder in the folder you publish your website to from iWeb

2. Name this new folder something like 'files' or ‘movies’ or whatever

3. Copy your .flv or any other file to that folder

4. Upload the folder to your server using your FTP application

5. yourbaseurl.com/nameofthefolder/nameofthefile.extension is the address at which the file will be stored on the web

Example: http://yourbaseurl.com/movies/nameofthefile.flv

Substitute the red url in the codes of Chapter 5 with that one modified to fit your case

Chapter 5: Integrating video to iWeb (should work for Internet Explorer too)

In general you only have to change what is written in red and only if you want to. The other parameters don’t need to be changed and you don’t have to care about them.

Where I wrote sample.wmv or any other “sample.” you need to replace it with the full url of the movie you found following Chapter 3 or Chapter 4 or you know what the url is. It will look something like that:

http://yourdomain.com/folder/sample.wmv

Change the sizes width and height parameters (number of pixels). Read the note about that at the end of the page.

Value true or 1 means that you agree with the action it is set for (it is enabled)

Value false or 0 means that you do not agree with the action it is set for (it is disabled)

The following codes were collected all over the internet. I hope they work.

- WMV

<object type="video/x-ms-wmv"

  data="sample.wmv"

  width="320" height="260">

  <param name="src" value="sample.wmv" />

  <param name="autostart" value="true" />

  <param name="controller" value="true" />

</object>

- QUICKTIME (If drag&Drop doesn’t work)

The following code is written for a 320x240 px movie. As you will notice the height is set to 256 and not 240px. That’s because the movie controls take 16px in height and those must be added to the height for the controls to work properly.

<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="320"
HEIGHT="256" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
<PARAM name="SRC" VALUE="sample.mov">
<PARAM name="AUTOPLAY" VALUE="true">
<PARAM name="CONTROLLER" VALUE="true">
<EMBED SRC="sample.mov" WIDTH="320" HEIGHT="256" AUTOPLAY="true"
CONTROLLER="true"
PLUGINSPAGE="http://www.apple.com/quicktime/download/">
</EMBED>
</OBJECT>

You can disable the movie controls by changing the parameters Controller=”true” to Controller=”false”.

- FLV

<object type="application/x-shockwave-flash" data="http://flv-player.net/medias/player_flv_mini.swf" width="320" height="240">

    <param name="movie" value="http://flv-player.net/medias/player_flv_mini.swf" />

    <param name="allowFullScreen" value="true" />

    <param name="FlashVars" value="flv=sample.flv&amp;autoplay=1&amp;autoload=1" />

</object>

That uses the player of http://flv-player.net/

- SWF

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"

width="468" height="60"

id="mymoviename">

<param name="movie" 

value="sample.swf" />

<param name="quality" value="high" />

<param name="bgcolor" value="#ffffff" />

<embed src="sample.swf" quality="high" bgcolor="#ffffff"

width="468" height="60"

name="mymoviename" align="" type="application/x-shockwave-flash"

pluginspage="http://www.macromedia.com/go/getflashplayer">

</embed>

</object>

- REAL

<object width="320" height="256"

classid="CLSID:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA">

   <param name="src" value="sample.rm" />

   <param name="center" value="false" />

   <param name="maintainaspect" value="true" />

   <param name="autostart" value="false" />

   <param name="numloop" value="1" />

   <param name="controls" value="imagewindow,all" />

</object>

Visit the following sites for further informations:

http://www.exploittheweb.co.uk/objects.html (*****Best)

http://www.danfergusdesign.com/classfiles/VCA225-digiProduction/exercises/ex-videoEmbed.html

http://www.alistapart.com/articles/byebyeembed

http://developer.apple.com/quicktime/compatibility.html

Chapter 6: Flash video player

The codes posted in Chapter 5 simply integrate the video into the website but without displaying a player with start/stop, pause, volume and time functionalities. If you want to have these features you need to use a flash video player.

1. Go to this website to download the player and you will get a folder called “mediaplayer”.

2. In the folder you find a file called “preview.jpg”. Replace that image with a preview image for your movie. Replace the “video.flv” file with your own video. If you need to convert your video to .flv you can use Crunch (freeware). Otherwise you can also use H.264 .mp4 files.

If you have multiple videos you want to post on your site add them all to that folder. To make it easier for you to embed them into your site rename the files to

preview1.jpg, video1.flv for the first video

preview2.jpg, video2.flv for the second video

...

3. Upload the entire folder to the root of your server (what the root is, is explained in the Basic web knowledge base FAQ on my website)

4. On the page where you want to embed the video add an HTML Snippet with the following code:

<object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="400" height="315">

<param name="movie" value="/mediaplayer/player.swf" />

<param name="allowfullscreen" value="true" />

<param name="allowscriptaccess" value="always" />

<param name="flashvars" value="file=/mediaplayer/video.flv&image=/mediaplayer/preview.jpg" />

<embed

type="application/x-shockwave-flash"

id="player2"

name="player2"

src="/mediaplayer/player.swf"

width="400"

height="315"

allowscriptaccess="always"

allowfullscreen="true"

flashvars="file=/mediaplayer/video.flv&image=/mediaplayer/preview.jpg"

/>

</object>

If you have multiple videos where it says video.flv change it to video1.flv, video2.flv, ...

If you have multiple videos where it says preview.jpg change it to preview1.jpg, preview2.jpg, ...

to fit your case.

If you upload to MobileMe and use the standard http://web.me.com/username/ address remember to put /username/ in the relative paths above. Example:

/mediaplayer/player.swf

would get

/username/mediaplayer/player.swf

where username is your MobileMe username. Again this does not apply if you’re using MobileMe with a personal domain setup as CNAME.

Change width and height parameters to fit your video. Example of the player:

Chapter 7: How to embed videos with HTML5 (for iPhone, iPad, ...)

This is discussed on this page.

Note 1: If you experience the following problem:

“The shape of the picture is not quite right - the player seems to squeeze the picture slightly even though I know I have the correct pixel ratio set up”.

You should try to play around a bit with pixels... Maybe different things handle pixel slightly differently... Maybe you have to include the pixels used by the movie control bar...

“I have done that by measuring it with a rectangle in iWeb. For my 400x225 16:9 movie, I needed to add 18 pixels to the height parameter and it worked. This is solved, thanks”

Note 2: If you want to have a Flash menu you can’t use HTML Snippets to embed the code, you will have to use Alternative HTML

iWebFAQ.org - Tutorials, Tips & Tricks is made with iWeb and for iWeb.

It’s presented by Cédric and hosted by HostExcellence.com

I would like you to give me feedback on this page by commenting in the appropriate section of the Forum. Tell me if it's been helpful. If it wasn’t please tell me why. If you think something is missing please tell me what. If you have questions about it post them there and I will probably try to give you an answer.

Thank you for visiting and supporting my website.

- Cédric -