Video Code For Websites
Copy & Paste responsive HTML5 video for websites & templates
HTML5 video code outlined below works in all CSS3 compliant web browsers and devices, however, because different browsers support different video types, you'll need to convert your videos to up to 5 different formats for full compliance and cross-browser testing should be done. Code below is responsive but will also work on non-responsive websites.
Before you startCheck the following links for some other available video options for your website.
- Video options overview
- HTML5 video add-on
- Business mega menu video templates
- Minisite responsive video layouts
Example: HTML5 responsive video
Below is an HTML5 video. It uses some css code in your webpage head section or global css file. See copy and paste code below, or optionally view the source code of this page in the head and body sections to copy the code.
Sample HTML5 Responsive Video
Add HTML5 video code (4 steps)
The following code is responsive HTML5 video. Options below show how to use 4 video types (for high compliance), or how to use just one video type for, not all, but most browsers. The fallback is the text note. Code from the "older code" section on this page can be used to replace the text note for fallback. Use in HTML5 webpages for the best results.
Step #1A (MULTIPLE file types): Add HTML:
Select and copy the following code. Paste it into your HTML5 webpage. This adds 4 video file types that you must create.
Step #1B (SINGLE file type): Add HTML:
Select and copy the following code. Paste it into your HTML5 webpage. This is for mp4 video, the most popular file type.
Do NOT add if you used code in step 1A.
Step #2: Add CSS code:
Select, copy, and paste the following code into your global .css file like the style.css at the bottom.
Scroll to make sure you select all code in the following window!
If you do not have a global .css file, copy and paste the css code in the <head> section of your HTML webpage between <style type="text/css"> opening and </style> closing tags. Paste just before the </head>. View the source code of this webpage to see how it's added.
Step #3: Replace videos:
Create a folder named "HTML5Video" inside your website folder. Optionally create 4 video types named the following, yourvideo.mp4, yourvideo.m4v, yourvideo.ogv and yourvideo.webm inside the folder.
If you used code from step #1A: You'll need to convert your original video type to these 4 formats: mp4 (H.264), m4v, ogv and webm. See notes below.
If you used code from step #1B: You'll need to use only 1 format: mp4 (H.264) is the best, however you can use m4v, ogv or webm if you use one of the other video "source" lines from step #1A.
Step #4: Options:
In the step #2 css code you added, edit the max-width: 520px; with your desired video width. Remove autoplay in the step #1 code to not auto play the video when the page loads.
Setup Notes:
- For more help and options about converting video types, conversion software, and more see video support.
- Mp4 is the most browser compatible video. See about the movie file types.
- When converting the mp4 file, be sure to convert as H.264 (*mp4).
- You may need to allow (install) these 4 video types as "mime" types in your hosting control panel or with an "htaccess" file in your hosting account.
- Your webpages should be HTML5 code. If not, you may need to change the DOCTYPE at the top of your HTML web pages to HTML5: <!doctype html> however, be aware that this may cause problems with other scripts or code you have in your HTML pages. Optionally, create new HTML5 pages just for your videos and link to these pages from a "video homepage" or index page. See also responsive popup window script.
- You can optionally add step #1 code to a .js file.
- For a full description of all HTML5 video options see HTML5 video Tag at W3schools.com and HTML5 video at Wikipedia.
Older Video Code Section
Notes: Can be used for fallback. Code in the following sections has been the web standard since the 90s and still works in most browsers, however, additional plugins may need to be installed in the viewing web browser. In the future this code will be out of date. If you use it as fallback for older browsers, replace the following code from step #1 above:
<div class="Rvideo-nosupport">
*Your web browser does not support HTML5 video*<br>
</div>
Use only one of the video file type options below for fallback. Do not add both to the same webpage.
Active X Messages: In some versions of IE you may want to add the code on this page into a .js file to stop "click to activate" messages. For help adding items to .js files click here.
Notes: The following older code is non-responsive. Using fallback may not be required as very few browsers do not support HTML5.
Movie trailer file type and code
Typically movie websites will use .mov files for the highest viewing compatibility. Below is the code to use for a .mov file.
Select and copy the code below. Paste this into any webpage. Edit "your-filename.mov" in 2 places. Adjust the height and width in 2 places.
How this will display
The above Quicktime code will display on your page like the image below. If not, adjust the height and width in 2 places until you see the controls and video.
Notes: The above is code used on most professional movie trailer type websites. You can use a .mpg file instead of a .mov file but the code will then be less browser compatible. The reason you edit everything in 2 places is because the "OBJECT" code is typically used by IE and the "EMBED" is used by most other browsers.
Test! Test! Test!
Always test in at least 2 browsers. Internet Explorer and either Firefox or Google Chrome.
Be professional and give them a choice
The code above will work in most browsers, however, you may want to give your viewers a choice. Create 2 new pages, setup one page with the code above and a .mov file. The, setup a .wmv or .mpg video on the other page using the code below. Then add links for users to choose on your video page that link to these 2 different pages. The above is "Quicktime" video, the code below is "Windows Media" code.
Windows video option
For the code below a .wmv video file is the best choice. A .mpg would be your second choice.
Right click in the window below and "select all" then choose "copy". Paste this into any webpage. Edit "your-filename.wmv" in 2 places. Adjust the height and width in 2 places.
How this will display
The above Windows code will display on your page like the image below. If not, adjust the height and width in 2 places until you see the controls and video.
Notes:
- When editing this type of code always edit the filename and height and width in 2 places.
- Generally do not add both sets of code above on the same page.
- It is recommended that you do not use this code on a homepage. It's best to always link to pages with the code above.
- Always test in at least 2 browsers. Internet Explorer and either Firefox or Google Chrome.
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.
Related Topics:
Using the Gallery to Display Other File Types
Setup YouTube Videos
CSS and HTML5
What is HTML5 in website templates.
Responsive Video Templates
HTML5 video websites with fallback.
HTML5 Business Web Templates
Drop menus and HTML5 video.
Music For Video
Royalty free music for video projects.
