HTML <video> Tag

Beginner
⏱️ 7 min read
📚 Updated: Jun 2026
🎯 3 Examples
HTML5 Media
HTML video tag tutorial — embed video in web pages
Overview

What You’ll Learn

By the end of this tutorial, you’ll confidently embed video in web pages with native HTML5 controls, attributes, and accessibility features.

01

Basic Embedding

Use video, source, and controls.

02

Key Attributes

autoplay, loop, muted, preload, poster.

03

Multiple Formats

MP4 and WebM with nested source elements.

04

Subtitles

Add captions with the track element.

05

Responsive Video

Scale players across screen sizes with CSS.

06

video vs iframe

Self-hosted files vs third-party embeds.

Fundamentals

What Is the <video> Tag?

The <video> element is an HTML5 tag designed to embed video content directly in a web page. Browsers provide a built-in player with play, pause, volume, and fullscreen controls when you add the controls attribute.

✅
Native HTML5 — No Plugins Required

Modern browsers play MP4 and WebM files natively. Pair <video> with <source> for format fallbacks and include fallback text for very old browsers.

Foundation

📝 Syntax

Specify video dimensions, enable controls, and point to a source file:

syntax.html
<video width="640" height="360" controls>
  <source src="your-video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Syntax Rules

  • width and height set the player size and help prevent layout shift while loading.
  • controls adds the native playbar (play, pause, volume, timeline).
  • <source> specifies the file URL and MIME type.
  • Include fallback text between opening and closing video tags for unsupported browsers.
Cheat Sheet

⚡ Quick Reference

AttributeExamplePurpose
controlscontrolsShow native player UI
srcsrc="video.mp4"Single file on video element
posterposter="thumb.jpg"Thumbnail before playback
autoplayautoplay mutedAuto-start (usually needs muted)
looploopRestart when finished
preloadmetadata, none, autoBuffering behavior
mutedmutedStart without sound
playsinlineplaysinlineInline playback on iOS
Comparison

⚖️ <video> vs <iframe>

ApproachBest ForNotes
<video>Your own MP4/WebM filesFull control, native player
<iframe>YouTube, Vimeo, etc.Third-party hosted players
<track>Subtitles inside videoWebVTT caption files
Reference

🧰 Attributes

Common <video> attributes for playback control and performance:

controls Boolean

Displays the browser’s native video player controls.

<video controls>
autoplay Boolean

Starts playback automatically. Pair with muted — browsers block unmuted autoplay.

autoplay muted playsinline
loop Boolean

Restarts the video when it reaches the end.

<video loop>
preload Enum

none, metadata, or auto — how much to buffer before play.

preload="metadata"
poster URL

Image shown before the user presses play.

poster="/images/preview.jpg"
width / height Pixels

Set player dimensions to reserve space and reduce layout shift.

width="640" height="360"
loop-preload.html
<video width="640" height="360" controls loop preload="metadata">
  <source src="your-video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Avoid autoplay with sound unless the user expects it. Always provide controls so viewers can pause.

Hands-On

Examples Gallery

Basic embedding, looping playback, and subtitles with WebVTT tracks using project sample files.

👀 Live Preview

Native video player with controls:

Press play to watch the sample video.

📚 Common Use Cases

Use <video> for tutorials, product demos, background loops, and accessible content with captions.

Basic Video Embedding

The primary use: embed a video file with native browser controls.

basic-video-embedding.html
<video width="800" height="450" controls>
  <source src="/video/count.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
Try It Yourself

Loop Playback

The loop attribute causes the video to restart once it ends.

loop.html
<video width="640" height="360" controls loop>
  <source src="/video/count.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
Try It Yourself

Adding Captions with track

Enhance accessibility by including subtitles or captions with a WebVTT file.

adding-captions.html
<video width="640" height="360" controls>
  <source src="/video/count.mp4" type="video/mp4">
  <track kind="subtitles" label="English" src="/video/count.vtt" srclang="en" default>
  Your browser does not support the video tag.
</video>
Try It Yourself Read track Tag Guide
Layout

📱 Responsive Video

Make videos scale on smaller screens with CSS:

responsive-video.css
video {
  width: 100%;
  max-width: 640px;
  height: auto;
  border-radius: 8px;
}

Set width and height attributes on the element for aspect-ratio hints, then let CSS scale down on mobile.

A11y

♿ Accessibility

  • Provide captions — Use <track kind="captions"> for spoken content.
  • Include controls — Let users pause, adjust volume, and enable captions.
  • Avoid unmuted autoplay — Unexpected sound harms accessibility and UX.
  • Fallback text — Place a message inside video for unsupported browsers.
  • Poster images — Use descriptive poster thumbnails with meaningful alt context nearby.

🧠 How <video> Works

1

Author adds video markup

Define sources, controls, and optional track captions.

Markup
2

Browser loads media

Picks the first playable source format and buffers per preload.

Loading
3

User plays video

Native controls handle play, pause, volume, fullscreen, and captions.

Playback
=

Rich multimedia inline

Video plays directly in the page without plugins or third-party scripts.

Compatibility

Browser Support

The <video> tag is supported in all modern browsers. Internet Explorer 9+ has partial support.

✓ HTML5 · Since IE 9

Universal native video support

Chrome, Firefox, Safari, and Edge all play MP4 natively. Provide WebM as a fallback via multiple source elements when needed.

99% Modern support
Google Chrome Fully supported
Full support
Mozilla Firefox Fully supported
Full support
Apple Safari Fully supported
Full support
Microsoft Edge Fully supported
Full support
Internet Explorer IE 9+ partial
Partial support
Opera Fully supported
Full support
<video> tag 99% modern support

Bottom line: Ship MP4 video with controls and optional WebVTT captions in all browsers your users run today.

Wrap Up

Conclusion

The HTML <video> tag is a versatile tool for integrating multimedia into web projects. By understanding syntax, attributes, captions, and responsive design, you can create engaging, accessible video content for your audience.

View Examples Gallery Try basic video
Pro Tips

💡 Best Practices

✅ Do

  • Optimize video files for faster web delivery
  • Provide fallback text inside the video element
  • Use controls so users can pause and adjust volume
  • Add WebVTT captions with track for accessibility
  • Set width and height to prevent layout shift

❌ Don’t

  • Autoplay with sound without user consent
  • Upload huge uncompressed files
  • Forget type on source elements
  • Use video for YouTube URLs (use iframe instead)
  • Skip captions on videos with spoken content
Summary

Key Takeaways

Knowledge Unlocked

Five truths every developer should know about <video>

Bookmark these before you embed your next clip.

5
Core concepts
🎬 01

Native Player

<video controls> embeds video without plugins.

Foundation
📄 02

source Element

Point to MP4/WebM files with MIME types.

Essential
🔊 03

Autoplay Rules

Use muted for autoplay; browsers block sound.

Attributes
♿ 04

Captions

Add track with WebVTT for accessibility.

A11y
📱 05

Responsive CSS

Scale with max-width: 100% on mobile.

Layout
🎯 You’re ready to embed video in HTML
Review Quick Reference →

❓ Frequently Asked Questions

The <video> element embeds video content in a web page with a native browser player when controls is present.
MP4 (video/mp4) is widely supported. WebM works in most modern browsers. Offer both via multiple source elements.
Browsers block autoplay with sound until user interaction. Use muted autoplay for silent background clips.
Nest a <track> element with kind="subtitles" and a .vtt file inside video.
Use iframe for YouTube and Vimeo. Use video for files you host directly (MP4, WebM).
Yes in all modern browsers. Internet Explorer 9+ has partial support for HTML5 video.

Embed your first video

Practice the <video> tag with controls and captions in the Try It editor.

Try basic video →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

5 people found this page helpful

HTML var Tag HTML wbr Tag