Video Code For Websites

Responsive HTML5 video code for websites and templates

Responsive Video Code For Websites Sticky Note
HTML5 video code works in all CSS3 compliant web browsers and devices, however, because different browers 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 start
Check the following links for some other available video options for your website.

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. The code uses 4 video types. 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 #1: Add HTML code:
Select and copy the following code. Paste it into your HTML5 webpage.

Scroll to make sure you select all code in the following window!




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 the css code in the <head> section from the source code of this webpage and add it to your webpage just before the </head>.


Step #3: Replace videos:
Create a folder named "HTML5Video" inside your website folder. Create 4 video types named the following, yourvideo.mp4, yourvideo.m4v, yourvideo.ogv and yourvideo.webm inside the folder.

You'll need to convert your original video type to these 4 formats: mp4 (H.264), m4v, ogv and webm. See notes below.


Step #4: Set video width:
In the css code you added, edit the max-width: 520px; with your desired video width.


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.

QT 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.

Windows Media Video


Notes:
  1. When editing this type of code always edit the filename and height and width in 2 places.
  2. Generally do not add both sets of code above on the same page.
  3. 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.
  4. 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