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:

View Output

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:

View Output

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.

View Output

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:

View Output

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

Video Formats

Some of the more common video formats are:

.swf
Shockwave/Flash File (by Macromedia/Adobe)
.wmv
Windows Media Player video format (by Microsoft)
.mov
Quicktime video format (by Apple)
.mpeg
Video compression format (specified by the Moving Pictures Experts Group)
.ogg
Open standard container format maintained by the Xiph.Org Foundation. Also includes .ogv, .oga, .ogx, and .spx extensions
.webM
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:

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

Related