HTML Video Codes

So you've made a video, you've uploaded it to a web server on the Internet, and now you want to show it to your users?

No problem! This page provides you with all the code you need to do the job!

HTML5 <video> Tag

The latest version of HTML (i.e. HTML5) makes it extremely easy to add video to a web page. HTML5 allows you to use a <video> tag, which, believe it or not, embeds video right into your web page!

Here's an example:

Embed a YouTube Video

You can embed a YouTube video by copying the code from the Embed link under Share link (underneath the video on YouTube).

YouTube uses an <iframe> tag to embed the video, which results in something like this:

Responsive Embed

If you use a Bootstrap based website, you can use Bootstrap's responsive embed component to scale your video to its containing block.

If you use this method, you can remove the width and height dimensions from the <iframe>, as Bootstrap will scale it as required.

Linking to a video file

The easiest way to include video on your website is to link to it. This is suitable if you don't want to actually embed the video within your HTML page. You can link to a video file using the <a> tag. All you need to do is write something like this:

This assumes that the video file is in the specified location.

Video Formats

Some of the more common video formats are:

Shockwave/Flash File (by Macromedia/Adobe)
Windows Media Player video format (by Microsoft)
Quicktime video format (by Apple)
Video compression format (specified by the Moving Pictures Experts Group)
Open standard container format maintained by the Xiph.Org Foundation. Also includes .ogv, .oga, .ogx, and .spx extensions
royalty-free, high-quality open video compression format for use with HTML5 video.

Web Server Support for MIME Type

You must ensure that your web server supports the video format that you use. If you find that your video plays OK on your local computer, but doesn't play on your live web server, it's probably because the live web server isn't configured properly for your video format. You need to ensure your web server supports the MIME type of your video.

If you're using an Apache web server, you can add the following code to your httpd.conf file or to an .htaccess file in the directory where your video file is:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

If you're using Plesk:

  1. Select the website you want to configure (if you have more than one website)
  2. Go to Web Directories
  3. Click on the MIME Types tab
  4. Click Add New MIME Type
  5. Enter the file extension into the Extension field (eg, .ogg)
  6. Enter the content into the Content field (eg, video/ogg). Alternatively, you may be able to select the value from the drop down menu (if it's available).
  7. Click OK