[View video sample page]
Can be added to any website or any HTML5 website template. For HTML5 websites only.
Go to popup window 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. Check that your website is HTML5.
4. Add CSS to page head area.
5. Add Javascript for the video.
6. Test.
7. Setup the videos.
8. Change / edit options.
9. 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-ONPAGE.html" in your website folder to proceed.
STEP #2: Test Video
The video below should be working. This is a very short test video so you may need to refresh this page. If it is not working, copy over the "videos-HTML5" folder over again or try testing in a different web browser.
STEP #3: Check Your Webpage
The webpage you want to add video to should be an HTML5 coded webpage. See Check If Your Site is HTML5 or HTML 4.01 in support. You can still add the video to a non-HTML5 webpage, however, the video may not display properly as HTML5 in some web browsers.
STEP #4: Add CSS
Select and copy the following line of code and paste this into the head of the HTML webpage you want to add an on-page video to. Paste this 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: Add Javascript
Select and copy the code in the box below. Paste this into the webpage you are adding a video to. Add this code to the HTML webpage in the area you want the video to display. For example add this code just after a text paragraph or image. Make backups first!!!
You can view the source code of this help page, or the video sample page, to see how the code was added to display the video above right after the step #2 paragraph.
STEP #6: Test The Video
Open the webpage you added the video to. It should be working. If the video 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. 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.
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.
VIDEO SIZES:
To edit the video size, edit the height and width variables near the top of the "video-1-ONPAGE.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.
AUTO START (autoplay):
Edit the var setauto variable near the top of the "video-1-ONPAGE.js" in the "video-1" folder to either "autoplay" all lowercase, or to "" (no text between the quotes).
ABOUT THE SAMPLE VIDEO FILES: | More Details
You will notice when you open the webpage you added a video to, 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.
ABOUT THE CSS:
When setting up video as "on-page" the only css file that is used will be the "video-ONPAGE.css" in the "colors-video" folder. The only css code and colors you should edit in this file are the background color and border for the video or the borders for the non-autostart buttons.
Avoiding CSS conflicts: 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.
VIDEO BORDER AND BACKGROUND COLOR:
Edit the "video-ONPAGE.css" in the "colors-video" folder to change the video border and background color.
ALIGNING THE VIDEO:
You can align the video left, right or center. Edit the "var videoalign" variable near the top of the "video-1-ONPAGE.js" in the "video-1" folder. Use only lowercase.
ADDING A SECOND VIDEO (SAME PAGE):
To add another video on the same page. Do only steps #5 through #7 above on this page editing the code in two places for video 2 instead of 1.
video-1/video-1-ONPAGE.js
...should be edited to...
video-2/video-2-ONPAGE.js
ADDING A SECOND VIDEO (DIFFERENT PAGE):
To add another video on a different page. Do steps #3 through #7 above on this page editing the code in step #5 in two places for video 2 instead of 1.
video-1/video-1-ONPAGE.js
...should be edited to...
video-2/video-2-ONPAGE.js
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 videos 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 may show messages when they are not uploaded to the web.
- Try doing the above steps again from the start.
- See the HTML5 Video Popup 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.
- Align or CSS problems: The "video-ONPAGE.css" file 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 #4 just above or just below your current .css line in your HTML pages.
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.