ProgramGuru

HTML video Tag

HTML <video> Tag: Add Visual Energy to Your Web Pages

Video tells stories that text can’t. Whether you're showcasing a cherry-picking tutorial or embedding a banana smoothie demo, the <video> tag lets you add rich, interactive media directly into your HTML — no plugins, no hacks.

Basic Syntax

<video width="320" height="240" controls>
  <source src="apple-video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

[ Video player appears here with play/pause ]

This is a fully functional video player. The controls attribute enables play, pause, volume, and more.

Common Attributes of <video>

| Attribute | Description | |-------------|-------------| | controls | Displays the browser’s video controls | | autoplay | Starts playing as soon as possible | | loop | Repeats video after it ends | | muted | Starts playback without sound | | poster | Image shown before the video plays | | width, height | Defines video dimensions in pixels |

Example: Autoplay and Muted

<video autoplay muted loop width="300">
  <source src="banana-demo.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

This configuration is commonly used for background video banners or silent previews.

Adding a Poster Image

The poster attribute lets you specify an image that displays before the video starts playing.

<video controls width="320" height="240" poster="cherry-thumb.jpg">
  <source src="cherry-story.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

[ Poster image appears until user hits Play ]

Supported Video Formats

  • MP4 – Widely supported (video/mp4)
  • WebM – Good quality and smaller file size (video/webm)
  • Ogg – Open format (video/ogg)

Multiple Format Example

<video controls width="320">
  <source src="fruit.mp4" type="video/mp4">
  <source src="fruit.webm" type="video/webm">
  <source src="fruit.ogg" type="video/ogg">
  Sorry, your browser doesn’t support this video.
</video>

Accessibility Tips

  • Always include controls unless autoplay is fully intentional
  • Use track for subtitles and closed captions
  • Never autoplay audio without consent; combine autoplay with muted for a silent preview

Example: Complete Video Block

<h3>Watch: How to Make a Cherry Smoothie</h3>

<video controls width="480" poster="cherry-smoothie.jpg">
  <source src="cherry-smoothie.mp4" type="video/mp4">
  <source src="cherry-smoothie.webm" type="video/webm">
  <track src="cherry-captions.vtt" kind="subtitles" srclang="en" label="English">
  Your browser does not support the video element.
</video>

[ Video player with poster image and subtitles ]

Summary

The <video> tag makes it easy to embed rich, interactive video content into your HTML pages. Now you know how to:

  • Embed video using the <video> and <source> elements
  • Use attributes like controls, autoplay, muted, and poster
  • Support multiple formats and add accessibility with captions

Check your understanding 1

Which attribute in the <video> tag displays native video controls like play, pause, and volume?
Choose one answer. You can try again.

Answer and explanation

controls

The controls attribute adds browser default controls for the user to interact with the video playback.

Check your understanding 2

The autoplay attribute on a <video> element causes the video to play automatically when the page loads.
Choose one answer. You can try again.

Answer and explanation

True

When autoplay is used, the video starts playing immediately once the webpage is loaded, without user action.

Check your understanding 3

Choose the option that lists all and only the correct statements.

  1. MP4
  2. WebM
  3. OGG
  4. AVI
Which of the following are commonly supported video formats in HTML5 <video>?
Choose one answer. You can try again.

Answer and explanation

Statements 1 and 2 and 3

MP4, WebM, and OGG are widely supported video formats for the <video> tag. AVI is generally not supported in browsers for direct embedding.

Check your understanding 4

What is the purpose of the poster attribute in the <video> tag?
Choose one answer. You can try again.

Answer and explanation

Specifies a preview image before the video plays

The poster attribute defines an image to display before the video starts playing, acting as a thumbnail or preview.

Check your understanding 5

The muted attribute can be used to start a video without sound, which is especially useful when using autoplay.
Choose one answer. You can try again.

Answer and explanation

True

Many browsers block autoplay unless the video is muted. Using muted allows autoplay to work silently.

Check your understanding 6

Choose the option that lists all and only the correct statements.

  1. controls
  2. autoplay
  3. loop
  4. href
Which attributes can be used with the <video> element to control playback behavior?
Choose one answer. You can try again.

Answer and explanation

Statements 1 and 2 and 3

The controls, autoplay, and loop attributes help control video playback. href is not a valid attribute for the <video> tag.

What’s Next?

Next up: We’ll explore how to embed YouTube videos with the <iframe> element and make your content even more dynamic.

Reaching the recap and completing the quizzes are separate milestones.

    Next lesson: How to Embed YouTube Videos in HTML →