Click image to open video
Can be added to any website or any website template. For HTML 4.01, XHTML and HTML5 websites.
Go to on-page style help
HTML5 Video Add-on support page
View Allwebco Design add-ons
Outline: (Steps on this page)
1. Unzip and place files and folders.
2. Test.
3. Create your videos page.
4. Add Javascript to page head area.
5. Add CSS to page head area.
6. Test.
7. Setup the videos.
8. Edit video pages.
9. Change / edit options.
10. Troubleshooting.
STEP #1: Copy Files | More Details
Unzip the "HTML5-Video-Add-On.zip" file and place the "videos-HTML5" folder and all files and subfolders in this zip file folder in your main template or website folder. Place the 4 .html pages in this zip file in your main template or website folder with your other HTML pages. Open the "help-video-POPUPS.html" in your website folder to proceed.
STEP #2: Test Video Popups
Open the videos-POPUPS.html and click on any link on this page. The popups should be working and a sample video should display in the popup. If the video popup did not work, try copying the "videos-HTML5" folder from the .zip file again into your template or website folder. (Also see "ABOUT THE SAMPLE VIDEO FILES" below on this page.)
STEP #3 Option A: Create a 6 Videos Index Page
Optionally, if you are adding the videos to an already existing page skip step #1.
- Make a copy of one of your existing HTML pages. For example make a copy of your "about.htm". Click here for help copying pages. Name this page "videos-home.htm".
- Open the "videos-POPUPS.html" included with this add-on in Notepad or a plain text editor.
- In the "videos-POPUPS.html" highlight the code between these notes in the HTML source code: "START COPY AND PASTE AREA" and "END COPY AND PASTE AREA" and select "copy" on the menu.
- In the new "videos-home.htm" you created (or page you are adding videos to) find the "MAIN TABLE" or the "CONTENT TABLE" note, or find the start of the page text or area you want to add the videos to. Paste the code from the "videos-POPUPS.html" into this area on your new "videos-home.htm". Be sure to paste inside the main table or "body" of the page. You may want to paste the new video code over some existing page text.
- Save this page. If you test the page in your browser, the video links will still not work and the text and tables may not be formatted yet. We still need to add the Javascript and CSS code in the next steps.
STEP #3 Option B: Add 1 Video to an Existing Page
Optionally, if you are adding a single video to one of your webpages.
- Open the "videos-POPUPS.html" included with this add-on in Notepad or a plain text editor.
- In the "videos-POPUPS.html" highlight the code between these notes in the HTML source code: "START VIDEO 1" and "END VIDEO 1" and select "copy" on the menu.
- In the page you want to add the video to locate the area you want to add the video and paste this code. You may want to paste the video code just after some existing page text.
- Save this page. If you test the page in your browser, the video links will still not work and the text and tables may not be formatted yet. We still need to add the Javascript and CSS code in the next steps.
STEP #4: Add Javascript
Select and copy the code in the box below. Paste this into the head of the page you have created or are editing. Add this code just above the </head> tag. NOTE: Optionally, if you are adding video links to any of your other pages or in the menu paste the following into all of your HTML pages. Make backups first!!!
View the source of the videos-POPUPS.html to see where to add the code above.
STEP #5: Add CSS
Select and copy the following line of code and paste this into the head of the new "videos-home.htm" or page you are editing above the </head> tag.
Note: If you have a CSS file now in your template or website you may want to paste the following code "above" your CSS code in your head. For more details see "About the CSS" below.
STEP #5 ADVANCED OPTION You can optionally add the following line to the head of your HTML page to use the video index layout code and none of the fonts or colors:
<link rel="stylesheet" href="videos-HTML5/colors-video/video-page.css" type="text/css">
STEP #6: Test The Video Pages
Open the "videos-home.htm" or the page you added the videos to and click any of the play buttons or links. A popup video page should open and play a sample video. If this is not working check the steps above or see troubleshooting below in this document.
STEP #7: Edit / Replace Videos | More Details
Replace all video files in the "video-1" folder inside the "videos-HTML5" folder and the one 125 x 70 .jpg image. See the HTML5 video support page for the steps to setup video #1 and conversion help. You will convert and replace 5 video files for each video.
STEP #8: Edit Video Pages | More Details
Edit the "videos-home.htm" page you created in step #3. For each video edit each of 6 "video-?.htm" pages in the "videos-HTML5" folder. These pages use HTML5 code so some older editors may not be able to edit them. See options below if you want to remove the sidebar area in the popups.
Search Engine Notes:
You may want to add the following line to your "robots.txt" to keep search engines from indexing the pages in your "videos-HTML5" folder.
Disallow: /videos-HTML5/
For more details, options, conversion and editing software help and support see the HTML5 Video Add-on support page.
ABOUT THE SAMPLE VIDEO FILES: | More Details
You will notice when you open one of the video popups, the video will display the type that is playing, wmv, mp4, m4v, ogv or webm. What type of video is playing will depend on your web browser software. You can download other web browsers for testing and setup.
VIDEO SIZES:
To edit the video size, edit the height and width variables near the top of the "video-1-POPUP.js" in the "video-1" folder to edit the size of the video you added as outlined above. See the HTML5 Video Add-on support page for more details.
ADDING VIDEO LINKS ON OTHER PAGES OR IN THE MENU:
NOTE: Be sure you do step #4 first on all pages that will link to a video popup or this will not work. You can add a video popup link to any existing page or to your "menu.js" or other .js files. To add video links on your existing HTML pages:
Select and copy the following code. Then paste this onto any of your HTML pages:
The link will appear as follows: "Your Video Name"
In HTML editors such as Frontpage or Dreamweaver create a new link and use this code for the actual link:
To add a link in the menu.js or sidebar.js you will add two backslashes to the link like the following:
In some menu.js files or other .js files you may need to use the following:
NOTE: If you are adding links to the sidebar.js or need help adding links to your pages, see the following two support pages: Adding page links and also see Adding items to .js files.
CHANGING COLOR THEMES: | More Details
This add-on features color themes in the "colortheme-page.css" and "colortheme-popups.css" files. You will edit these files in Notepad to change the colors. Locate the "whiteblack.css" and change that to any of the colors listed in the css files. You can edit that to "white", "black", "whiteblack", "red" and "blue".
ABOUT THE CSS:
The 2 "colortheme" css files "call" the css files in the "colors-video" folder. To edit the fonts or colors, edit the files in this folder.
When adding the css code to your page in step #5 above, pasting this line above your existing CSS line means the page will use your default CSS because it is listed after the new video css code you are adding. CSS uses the last "style" class listed if there are 2 classes with the exact same name.
EDITING COLORS:
All color theme files are located in the "colors-video" folder and can be edited with your custom colors. Edit the files you have set in the "colortheme" css files.
MAKING CUSTOM THEMES: | More Details
Make a copy of one of the color files like the "white.css" in the "colors-video" folder. Rename this to your theme. EXAMPLE: "mycolors.css". Edit the new css file with your colors. Edit the theme files detailed in the above paragraph "CHANGING COLOR THEMES" with your color theme file name.
OTHER CSS FILES: THE "video-page.css" AND "video-POPUP.css":
These 2 files in the "colors-video" folder include the layout, spacing, margins and sizes used in the video index and popup pages. You can edit these files to change alignment and spacing.
REMOVING THE VIDEO POPUP SIDEBAR:
Edit any of the video htm pages in the "videos-HTML5" folder and delete the code between the "START SIDEBAR" and "END SIDEBAR" notes to remove the popup sidebar.
POPUP WINDOW OPTIONS: | More Details
There are some options in the "videoHTML5-popups.js". The "videoHTML5-popups.js" can be found in the "videos-HTML5" folder and can be edited with Notepad or any plain text editor.
VIDEO IMAGES:
All images used are located in the "picts-video" folder and can be edited.
If you do the steps above and the videos are not working:
- Be sure you have added the line of code in step #4 to any and all pages with video links on them. Add the code in step #4 just above the </head> tag.
- You are linking the wrong .htm document or it is misspelled. Remember that hosting areas are case sensitive. Be sure all file and link names match exactly.
- Your "videos-HTML5" folder does not exist or is named incorrectly.
- Try testing in other browser software. Some browsers stop videos or show messages to allow popups when they are not uploaded to the web.
- Try doing the above steps again from the start.
- See the HTML5 Video Add-on support page for other possible issues.
- Check the Pages or Files not Updating After an Edit support page.
- Check the Parts of the Template are Missing After Uploading support page.
- FONT PROBLEMS: The .CSS files may define some fonts, styles or "classes" that your template or website .css file may also be using. If you have any font issues you can paste the line in step #5 just above or just below your current .css line in your HTML pages, or use the step #5 advanced option.
COPYRIGHT © Allwebco Design Corporation | View Allwebco User Agreement
Unauthorized use or sale of this script, images or any files included in this download is strictly prohibited by law. By purchasing this script you are authorized to use this on a single Allwebco template, website or any template from another company. You are also authorized to modify all included files for this single site use. Click here for add-on re-use details and payments.
Purchaser is authorized to use any and all files included in the download on a single website.