HTML Video

HTML video allows you to display video content directly on a web page. You can use videos for tutorials, online courses, product demonstrations, news updates, and promotional content. The HTML <video> element makes it possible to play videos in modern browsers without requiring additional plugins.

In this tutorial, you will learn how to add videos to HTML, use different video formats, and customize video playback.

What Is the HTML Video Element?

The HTML <video> element is used to embed video files into a web page. It supports built-in playback controls and several attributes that help you manage how videos appear and behave.

Here is a simple example:

<video controls width="500">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>

The controls attribute displays playback controls, while width="500" sets the video width to 500 pixels.

You can also explore our HTML Media tutorial to understand how audio and video work in HTML.

HTML Video Syntax

The basic syntax of an HTML video element is:

<video width="640" height="360" controls>
  <source src="tutorial.mp4" type="video/mp4">
</video>

The important parts are:

• <video> defines the video player.
• width specifies the video width.
• height specifies the video height.
• controls displays playback controls.
• <source> specifies the video file.
• src contains the file path or URL.
• type identifies the video format.

Adding a Video to an HTML Page

To display a video, place the video file in your project folder and specify its location using the src attribute.

For example, if your folder contains index.html and tutorial.mp4, you can use the following code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Video Example</title>
</head>
<body>

  <h1>My First HTML Video</h1>

  <video width="640" controls>
    <source src="tutorial.mp4" type="video/mp4">
    Your browser does not support HTML video.
  </video>

</body>
</html>

Save the file as index.html and open it in a browser. The video player should appear if the file path is correct and the format is supported.

Supported HTML Video Formats

Different browsers support different video formats and codecs. Common formats include:

Format	MIME Type	Description
MP4	video/mp4	Widely supported video container
WebM	video/webm	Common web video format
Ogg	video/ogg	Open multimedia container

MP4 with H.264 video and AAC audio is a common choice for website videos. Actual playback also depends on the codecs used inside the file.

Using Multiple Video Sources

You can provide more than one source so the browser can try another format if the first one is unsupported.

<video controls width="640">
  <source src="lesson.webm" type="video/webm">
  <source src="lesson.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>

The browser checks the sources in order and uses one it can play.

Important HTML Video Attributes

The <video> element supports several useful attributes:

Attribute	Purpose
controls	Displays playback controls
width	Sets the video width
height	Sets the video height
autoplay	Requests automatic playback
loop	Repeats the video
muted	Starts the video without sound
poster	Displays an image before playback
preload	Provides a hint about loading the video

For example, you can display a preview image before the video starts:

<video controls width="640" poster="preview.jpg">
  <source src="tutorial.mp4" type="video/mp4">
</video>

Best Practices for HTML Video

Follow these practices when adding videos to your website:

• Compress video files to improve loading speed.
• Use suitable formats and codecs for browser compatibility.
• Add the controls attribute so visitors can manage playback.
• Use a poster image to provide a useful preview.
• Make videos responsive so they fit different screen sizes.
• Provide captions or subtitles when needed.
• Avoid unexpected autoplay, especially with sound.

For related tutorials, explore HTML Audio, HTML Video Controls, and HTML YouTube Videos.