Adding video to a webpage

This video tutorial explains how to add a video to your webpage using the HTML5 video tag. With the HTML5 video tag, you can specify the height, width, source, and type of video file(s) you are working with as well as adding controls, autoplay, and loop features.

When adding videos, you will need to consider browser compatibility. The following browser accept these videos using the HTML5 video tag (this could change):

  • Internet Explorer: MP4
  • Chrome: MP4, WebM, Ogg
  • Firefox: MP4, WebM, Ogg
  • Safari: MP4
  • Opera: MP4, WebM, Ogg

The safest bet is to use MP4 but it is a good idea to provide multiple file types. Keep in mind that the autoplay feature is currently not supported in Safari or Opera browsers and does not work on mobile devices such as the iPad or iPhone (this could also change).

When you add a video to your page you can specify the width and height, if you would like to auto-play the video, loop the video and if you would like to show or hide the video player controls. The video player controls look like this in Chrome browser:

Watch the video below and then scroll down to view the sample code.

The sample code below shows how to use the video tag. You might want to remove the autoplay, loop or controls attributes as they are all enabled in the example below. You will also need to change the width and height to suit your video.

<!DOCTYPE html>
<html>
<head>
 <title>Adding video to a webpage</title>
 <meta charset="utf-8"/>
</head>

<body>
 <video width="550" height="400" controls autoplay loop>
 <source src="your_video_file.mp4" type="video/mp4"/>
 Your browser doesn't support the HTML video tag. Consider upgrading to a newer browser.
 </video>
</body>

</html>