Setup For Responsive Video

Responsive video in website templates

This support page is only for templates with "responsive" type videos. See the sidebar links on this page for links to other video types.

See the "video step" on your template "help.html" for the correct support page link.



Responsive video code
This type of video will shrink the video to a specific size on mobile browsers. The media queries code is in the "video-sizes.css" in the "videos" folder.

Check if you have this style:
Check your "video-1.js" in the "videos" folder. If the first line in the file indicates "RESPONSIVE (Media Queries)" then you have responsive HTML5 video.

Video files:
Video file types included with this video style will be: mp4, m4v, webm, ogv and wmv. 5 total videos need to be created. See details below.
Before you start:
It is best to make sure your hosting account is setup with streaming video and allows for all video "mime" types: mp4, m4v, m4a, ogv, ogg, oga, webm, wmv. See also "Tips & Troubleshooting" below and streaming your website video.

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

Overview: About the video Code
The videos, the "video-?.js" video code files, and the "video-sizes.css" can be found in the "videos" folder. The HTML page that is displaying the videos will be in the folder up from this folder, or in your main web template folder. Click below to view the "video-1.js" source code.



Setting up video #1 EXAMPLE:

1. In the "videos" folder, replace 5 videos with your video files.
2. Replace "video-1.mp4" "video-1.m4v" "video-1.webm" "video-1.ogv" and "video-1.wmv".
3. We used the OGG Video Converter to convert all our videos (See section below).
4. Edit the sizes of your videos by editing 3 video classes for ".video-1", ".video-1" and ".video-1WMV" in the "video-sizes.css". See section below.
5. In your main template folder edit the "video-1.htm" with the description of your video #1.
6. Open the "video-1.htm" and test your video. See "testing" below.
7. Do the steps above for video #2.

How we created the template video samples:

Creating movies for web use
We used Windows Movie Maker included free in Windows, and also "Sony Vegas Movie Studio Platinum Pro" for editing and outputting all our template movie samples as WMV files first, then we converted the WMV files (see details below).

You can create WMV movies in Windows Movie Maker, Sony Vegas, or any other video editing software using your AVI, MPG, MPEG or WMV files. When you have completed your editing, you can "export" your movies for web use. In Windows Movie Maker and Sony Vegas, choose "File" then "Save Movie File", choose "My Computer", choose file name and save location, choose "other settings" and "High quality video (small)" for a 640 x 360 video and click "next" to create the file. In Sony Vegas you can edit and output your movies in any custom size.

Converting movie files
There are many converters available to easily convert your movie files to the 5 types you will need. We found the OGG Video Converter to be the best choice for ease of use and number of conversions available. This should be the only software you will need.

Recommendations when editing the videos:
If possible make your movies not fade-in or fade-out so the video will display the last and first frame of the video when it is not set to "not autoplay" or when the movie is finished playing.

If you are editing your own videos you can place a .jpg image for the first and last movie frames in most editing software.


About the movie file types
5 video types are setup in the HTML5 video template/addon code. These are the 5 most popular types and will allow for the highest compatibility in popular web browsers. Here are the details:

Type	Browser Support	codec
mp4	Chrome, IE9+, Safari, iPad, iPhone, Android, Blackberry	(H.264)
m4v	Chrome, IE9+, Safari, iPad, iPhone, Android, Blackberry	(H.264)
webm	Chrome, IE9+, Opera (Firefox - limited)	(VP8)
ogv	Firefox (some versions)	(OGG)
wmv	Non HTML5 PC Windows browsers (XP), IE7, IE8	Windows

mp4
The most popular file type for HTML5 video. Works on most mobile devices as well.

Important: Be sure when converting to mp4 you use the H.264 (*mp4) option if available.

m4v
Almost the same as mp4. Can be skipped if you want to use only 4 video types.

webm
Required to display videos in Opera and some versions of Firefox.

ogv
Required for most versions of Firefox.

wmv
The wmv option is included for all PC browsers that do not support HTML5, most notably for display in the still popular Windows XP. Mov for Mac was not included due to the fact that most Mac users upgrade their browsers when available and HTML5 support is more widespread in Mac browsers.

HTML5 video options:

Changing the video file name
To change the file to use for the HTML5 video edit the "video-?.js" in the "videos" folder. Edit the "video-?" variable near the top of these .js files.




Important: If you change the video name the responsive code will no longer work. You must add a new class for your new video name (in 3 places) in the "video-sizes.css". Click visual below:




Editing video sizes
Edit the videos for 3 sizes: Full sized video, mobile sized video, and WMV fallback height adding 45 pixels for the controls in older browsers. These sizes are edited in the "video-sizes.css" in the "videos" folder.




Turning off video file types
Edit the "video-?.js" in the "videos" folder. Any one of the 5 file types can be turned off with a "yes" or "no" option in the "// VIDEO TYPES TO USE" section.




Adding a video to a non-video page
If you want to add a video to one of your pages like the homepage you need to copy 2 sections of code from one of the "video-1.htm" pages. Copy the "videos/video-sizes.css" line of code in the "head" section for your new page, and copy the code between the "START VIDEO CODE" and "END" to paste into your new page.


CSS font and styles
All CSS code for the video pages, borders and background colors, can be edited in your template CSS file.


Adding another video
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-1.js". Name it "video-5.js".
2. Create 5 new videos: "video-5.mp4", "video-5.m4v", "video-5.webm", "video-5.ogv" and "video-5.wmv".
3. Open the "video-5.js" and edit the "video-1" to "video-5".
4. Make a copy of the "video-1.htm". Name it "video-5.htm".
5. Edit the "video-5.htm" and change "video-1.js" to "video-5.js" in the following code:
   
   <script type="text/javascript" src="videos/video-5.js"></script>
   
   
6. In the "video-sizes.css" add 3 new classes for "video-5". One new class in each of 3 sections. Name the classes for video #5. (See also section above "Changing the video file name").
7. If your template includes next and back buttons edit with new links to the next and previous videos.
8. If your template includes a "menu-videos.js" add a new button for the #5 video.
9. Test the "videos.htm" page or the page you added the video to.

HTML5 First Frame "Poster" Feature:

Problem:
On movies without autoplay, the movie shows as a blank black box on the page, or only the overlayed play button displays.

In older browsers:
In older non-HTML5 browsers like IE8, the movie may show as a black box. This is because IE8 does not support HTML5 video and the wmv fallback "object" and "embed" code is being displayed. See solution #2 below.

About the HTML5 first frame poster feature
HTML5 video does include a "poster" attribute. This feature specifies an image to be shown while the video is downloading, or until the user hits the play button. The "poster" feature was not included because it is not working properly on many devices including iPhone and iPad.

Solution:
Optionally, the first frame of your movie can be the "poster" if your movies do not fade-in or if you can edit them to not fade-in, then the first frame of the movie will display in HTML5 compliant browsers when the movie is not playing. For more details on HTML5 video options and attributes see the HTML5 <video> tag at w3schools.

Troubleshooting section:

Problem: video not working when uploaded:
It is common for the videos to not work once uploaded in some browsers. This is because of "mime" types a hosting server allows. If you have cPanel hosting set your "mime" types in your control panel. Optionally contact your hosting company to have the following "mime" types allowed on your hosting server.

AddType video/mp4 mp4 m4v
AddType audio/mp4 m4a
AddType video/ogg ogv
AddType audio/ogg ogg oga
AddType video/webm webm

CAUTION: The above text is from a file named ".htaccess". Do not edit your ".htaccess" unless you are sure what you are doing. This is a server file and should not be edited by novice users. It is advised that you contact your hosting company for help with this configuration. You can copy the above code to send to them as an example.

Tips & Troubleshooting:

• Create a page with only a single video on it for testing.
• Be sure any page you have added videos to includes an HTML5 doctype.
• Slow Videos: You may need to contact your hosting company and have "video streaming" installed as well as configuring to allow all "mime" types as listed above. (mp4, m4v, m4a, ogv, ogg, oga, webm, wmv). See also streaming your website video.
• Do not use spaces in any video file or .js file names.
• Hosting Tests: Try uploading the default template setup files from Allwebco Design to test your hosting. You can always contact Allwebco for a fresh download.
• Video Too Big on Mobile or Not Correct: Check the "video-sizes.css" in the "videos" folder. Make sure you have 3 classes for each video. See also section "Adding a video to a non-video page" above.
• Choppy Video: See slow videos above and also try re-saving your videos with other settings. Be sure to convert mp4 as "mp4 H.264". There may also be issues with your converting software. Contact your conversion software vendor.
• Check Your Hosting: You may need to contact your hosting company to see if they support these mime types. Optionally, you may need to switch hosting companies. See Allwebco Hosting.
• Videos Not Working at All: See Items Missing After Uploading and also Files not Updating.
• Known hosting companies that may not have streaming: Lunarpages. You will want to contact them to have streaming added.

Video converting software

Windows
To convert your videos to all 5 HTML5 video types Allwebco used the OGG Video Converter. We found this software to be fast, reliable and very easy to use. Many other video converters are available if you try some searches at Google.

User recommended Free Make Video Converter. See notes below.

Mac
For converting video on Mac see Miro Video Converter. This was recommended by a user and is a free, open source converter, but has not been tested by Allwebco.

Converter software issues
One user has had problems with the "Any Video Converter" so this conversion software is not recommended.

Converter notes from template user "Brian A"
Unfortunately I did not keep the "Any Video Converter" software on my machine so I cannot tell you which version I had (Maybe 3.3.4). It had to have been one of the newer versions because I downloaded it probably 4-6 weeks ago. The video converter I am using now is called "Free Make Video Converter" version 3.0.1.

Both of these are free downloadable converters. Both have their limitations, but besides compatibility, what I like about the Free Make video converter is when you choose HTML5 conversion it creates the webm, ogv, and mp4 files in one step all at once. With Any Video converter you had to do each file separately.
Video editing software
You can use "Windows Movie Maker" included with most versions of Windows. Check the Microsoft Website for details. Movie maker can edit .wmv, .avi and .mpg movies. "Sony Vegas Movie Studio Platinum Pro" is another easy to use software we recommend.