Popup Video Setup

Website template video setup

HTML 4.01 template video:
Outdated HTML 4.01: Support for Allwebco template popup video. Playable files may be a .wma, .wav, .mp3, .au, .avi, .mpg or .mov files. See the video section on your template help.html for the correct info and support links. With this template style, video code is displayed in popup windows. If you have this type of video, your website download should include a folder named videos.


Video file format:
Video file types included with this video style will be: wmv and mov.


Before you start:
Check that your hosting account is setup to allow streaming video and allows for the following video "mime" types: wmv and mov. Also see streaming website video support.

Contact your hosting company or check your hosting control panel to confirm video streaming and "mime" compatibility in your account. Go to Allwebco Hosting for quality hosting that offers these features.


Overview: About the Code
Files and images for the popup video can be found in the "videos" folder. The video popup window sizes are found in the "pop-closeup.js". Fonts colors and sizes for the video popups are found in the template CSS file.

Files you can edit
In the "videos" folder you can edit any of the files. You can replace or edit the video popup graphics by editing the images in the "videos" folder.

The popup HTML pages
Edit the "video-quicktime.htm" and "video-winmedia.htm" HTML pages in the "videos" folder to edit the video popup text. You can edit these pages with any HTML editor like Dreamweaver or Frontpage or with a plain text editor like Notepad.

Changing the video file type | Click for .js file help
To change the file to use for the video popups edit the "player-quicktime.js" and "player-winmedia.js" in the "videos folder". For Windows Media it's best to use a .wma file for video or mp3 for audio. For the Quicktime player it's best to use a .mov file for video and a .mp3 for audio. An .mpg 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.

Graphics buttons and fonts
The graphics used for the video popups can be found in the "videos" folder. You can edit these with any graphics editor. Font sizes and "close" button code can be found in the CSS file.

Popup window sizes
You can change the size of the video popup windows. You will edit the pop-closeup.js in Notepad. Click here to see how to edit .js file variables.

Adding more video popups
You can copy the existing code to add more video popups. Here are the steps.

1. In the "videos" folder: Make a copy of the "video-quicktime.htm" the "video-winmedia.htm" the "player-quicktime.js" and the "player-winmedia.js".
2. Name these four files with a "-b". For example rename the "player-winmedia.js" copy to "player-winmedia-b.js".
3. Place your new movie files in the "videos" folder.
4. Edit the two new "-b" .js files with your new movie names.
5. Edit the two new .htm pages to call the two new .js files.
6. Move out of the "videos" folder. Now you will copy to add the popup code to your HTML pages like the "window_press.htm" or "video.htm". FInd the existing code notes in the pages. Notes like "START CODE FOR VIDEOS" to the "END" note. Copy the code between the notes and paste this later in the HTML page or paste this into a new HTML page.
7. Now edit the links in your pasted code to call the two .htm pages you created in step #2 above. EXAMPLE: Edit the "video-winmedia.htm" link so it opens the new "video-winmedia-b.htm".

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