Adding video to a web page

Web Design with HTML & CSS

🕑 This lesson will take about 10 minutes

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 (eg. play/pause/change volume/mute), autoplay, and loop features.

When adding videos, you will need to consider browser compatibility. The following browsers 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 now blocked or not supported by newer browsers to prevent videos from automatically playing on a web page without the user’s permission. You can still use the loop feature and should always include controls.

When you add a video to your page you can specify the width and height if you would like to show or hide the video player controls, and if you would like to loop or autoplay the video. The video player controls look like this in the 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.