How to Add a Video to Your Website in HTML (HTML5)

Insert or Embed a Video using HTML

How to Add a Video to Your Website in HTML (HTML5)

by Christopher Heng,

This guide deals with how you can insert a video into your web pages using HTML, or to be specific, using the facilities provided by HTML5.

Preamble: Other Alternatives to Writing Your Own Code

Before we delve into the HTML, you should be aware that there are other ways you can add a video to your site.

If the above alternatives do not suit your needs, read on.

HTML5 Required

Note that this tutorial deals with the HTML5 code for inserting a video. This means that your page has to be in HTML5. If it is in some other version, like XHTML 1.0 or HTML 4.01, change the DOCTYPE or DTD to "<!DOCTYPE HTML>" and adjust the code on the rest of the page, if necessary, to conform to the HTML5 specifications. One easy way to speed up the process of locating the HTML that needs to be modified is to validate the HTML. That is, run your page through one of free HTML validators around. It will choke on the HTML features that are no longer supported, and point them out to you. This saves time since you don't have to go through the page line-by-line.

And, as you have probably already surmised from the paragraph above, I will also assume that you know some HTML, or at the very least, know how to insert such code into your web page without messing up the rest of the page. If this poses a problem, you may prefer to use one of the alternative methods mentioned earlier.

The <video> Tag

The code for inserting a video is:

<video src="demo.webm" poster="initial_static_picture.jpg" width="480" controls>

The video file in the example above is "demo.webm" located in the same directory as the web page loading it. This particular video is in the WebM format. (I will discuss video formats in greater detail later in this article.) The optional poster attribute is used to display an initial image on the video player screen. The width attribute, also optional, specifies the width of the video player in pixels. There is also a height attribute for those who want to include that too. The controls attribute inserts buttons onto the player, allowing your visitor to pause, resume playback, change the volume, etc. The exact controls it inserts into the player varies from browser to browser. Like width, poster and height, it is optional.

Other possibly useful attributes include the following:

You can also insert content between the opening <video> and closing </video> tags. It will only be displayed in older browsers, that is, those that do not support the <video> tag. For example, the following issues an error message in such browsers.

<video src="demo.webm">
Sorry, your browser does not support this video player.

You can, of course, write whatever you want. You can even insert a script to load your video using Flash or Silverlight in that space, if you are so inclined.


Note that the following demo has no audio track, so there's no need to check your speakers. (I was trying to keep the file size as small as possible.)

How to Use Alternative Video Formats

The above demo uses the code below.

<video controls width="720">
  <source src="layout-wizard.mp4" type="video/mp4">
  <source src="layout-wizard.webm" type="video/webm">
<div style="border: 1px solid black ; padding: 8px ;">
Sorry, your browser does not support the &lt;video&gt; tag used in this demo.

As you can see, it provides two alternative video formats, MP4 and WebM. As such, the URLs pointing to the video files are now written separately in their own <source> tags instead of being specified in the src attribute of <video>. The <source> tag allows you to specify different alternative formats so that web browsers that don't support one format can choose another.

Supported Video Formats

Copyright © 2018-2024 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Add a Video to Your Website in HTML (HTML5)

Link to Us
No Spam Policy
Privacy Policy
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Web Hosting
Perl / CGI
.htaccess / Apache


Free webmasters and programmers resources, scripts and tutorials Free How-To Guides
Site Design Tips at
Find this site useful?
Please link to us.