Video Tag in HTML - Syntax, Attributes, Formats, Poster Image & Examples

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

What’s Next?

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