IFrame Video Setup (type 2)

Website template built-in video support

Built-in template video
Support for Allwebco templates with video IFrames (type 2). See the help.html included with your template download for the correct options and support links. If you have this type of video, your website download will include a folder named videos with 8 html pages inside this folder.

Outdated: See video overview for current video integration support.

Video file types
File types used in the video message popup can be .wmv, .wma, .wav, .mp3, .au, .mpg, .mov or any other web compliant audio or video format.

IFrame video code
This support page is only for templates with video IFrames (type 2). See the sidebar links on this page for other video types. Inside your template "videos" folder you will see 8 .js files, 8 .htm pages, 5 .jpg images and 8 video files.



Overview: About the code
Images and video files you will need to edit for the IFrame video can be found in the "videos" folder. The page that has the embedded IFrame is named "video.htm". When you open the "video.htm" you are actually seeing the "video_frame.htm" embedded inside the "video.htm" page. So you are really seeing 2 HTML pages at one time. The page you will want to edit to change the text for each video description, or to add more videos is named "video_frame.htm".

How the IFrame works
In your main template folder you should see a file named "video.htm". This is the page that includes only the frame code. You will not need to edit this page. This page includes an "embedded" HTML page named "video_frame.htm". The "video_frame.htm" includes the text, media select links and images you are seeing on the "video.htm".

Setup video-1 EXAMPLE:

1. Edit the "video_frame.htm" with the description of your video.
2. In the "videos" folder, edit the "video-1.jpg" with any .jpg image you would like.
3. Replace the "video-1.mov" and the "video-1.wmv" files with your video files.
4. Edit the sizes of your videos by editing the "player-quicktime-1.js" and "player-winmedia-1.js" files.
5. In your main template folder open the "video.htm" and test your videos.
6. In your template "videos" folder, you can optionally edit the "video-winmedia-1.htm" and "video-quicktime-1.htm" if you want.

What is the IFrame doing?
When you open the "video.htm" page in your main template folder, the "video_frame.htm" page is embedded inside this page. When you click on a "Windows Media" link the page inside the IFrame changes from the "video_frame.htm" to the "videos/video-winmedia-1.htm" page. For the "Quicktime" link the page changes to the "videos/video-quicktime-1.htm". The "video.htm" page is not changing, only the page embedded in the "video.htm" page is changing to display the video.

How many files for each video?
There are 2 HTML pages used for each video. One for the Windows Media video and one for the Quicktime video. There are 2 .js files for each video. There is 1 .jpg image, one .mov file and one .wmv file for each video. 7 files total for each video.

Changing the video file type
To change the file to use for the video IFrames edit the "player-quicktime-?.js" or the "player-winmedia-?.js" in the "videos" folder. Edit the "video-1.wmv" or "video-1.mov" variable near the top of these .js files. For Windows Media it's best to use a .wmv or .wma file for video, and mp3 for audio. For the Quicktime player it's best to use a .mov file for video and a .mp3 for audio. An .mpg or .mpeg video file should work for both if you do not want two file types. Place your movie or audio files in the "videos" folder.

Editing the video area sizes | Click for .js file help
To resize the video area edit the "player-quicktime-?.js" and "player-winmedia-?.js" files in the "videos" folder. The sizes are the height and width variables at the top. They should be at a width of 320 (mov) and 352 (wmv) and height of 304 (mov) and 310 (wmv) in your original download. You can edit these numbers. Windows Media controls are 65 high and QuickTime controls are 16 high.

Graphics
The "video_frame.htm" page includes a graphic for each video named "video-?.jpg" located in the "videos" folder.

The "video_frame.htm" page
This page can be edited with any text or images you would like.

IFrame Sizes
If you need more room on the page for your videos or your pages or videos are being cut-off, edit the "VIDEO PAGE CODE" area in your template CSS file.

Adding new video pages
You can copy the existing code to add more videos. Here are the steps.

1. In the "videos" folder: Make a copy of the "video-quicktime-1.htm" and "video-winmedia-1.htm".
2. In the "videos" folder: Make a copy of the "video-quicktime-1.js" and "video-winmedia-1.js".
3. Make a copy of the "video-1.mov" and "video-1.wmv".
4. Make a copy of the "video-1.jpg".
5. Rename these file copies replacing the "1" in each name with a "5".
6. Open the "video-quicktime-5.js" and edit the "video-1.mov" to "video-5.mov".
7. Open the "video-winmedia-5.js" and edit the "video-1.wmv" to "video-5.wmv".
8. Edit the "video-quicktime-5.htm" and "video-winmedia-5.htm" in the "videos" folder to use the new "5" .js files. Find and replace "1" with "5" in one place, so the pages will show the new "5" .js files.
9. Open the "video_frame.htm" page and search for the "START VIDEO-4" note. Copy this code group and paste it below itself. Edit the "4" in 5 places with the number "5" so the new area will link to the new "5" pages and show the new "5" image.
10. Test all pages and links.

Video editing software:
You can use "Windows Movie Maker" included with most versions of Windows. Check the Microsoft Movie Maker Website for details. Movie maker can edit .avi and .mpg movies, however, this is a limited version of the software and does not include a lot of editing options.

The following software includes many more video editing options including animated captions, better transitions as well as .flv conversion for Flash video.

• Corel VideoStudio
• Adobe Premiere Elements
• Adobe Premiere Pro