HTML Video

Learn how to embed videos on web pages and make them accessible for all users.

What is HTML Video?

The <video> tag allows you to embed videos directly into your webpage without relying on external players.

Real-Life Example: Like YouTube videos embedded in a blog post, HTML video lets you display media directly in your page.

The <video> Tag and Attributes

  • src – Video file URL
  • controls – Show play, pause, and volume controls
  • autoplay – Play automatically (use carefully)
  • loop – Play video repeatedly
  • muted – Start video muted
  • poster – Image displayed before video starts

Tip: Always include controls for accessibility.

Example: Basic HTML Video

HTML Code:


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

Output on browser:

Multiple Video Sources

Provide multiple video formats to ensure compatibility across all browsers.


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

Video with Poster Image


<video width="640" height="360" controls poster="poster-image.jpg">
    <source src="sample-video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Tip: Poster images make your page look attractive before the video plays.

Accessibility Best Practices

  • Always provide controls for keyboard users
  • Include captions/subtitles for hearing-impaired users
  • Provide a transcript if video content is complex
  • Ensure video does not autoplay with sound

Pro Tip: Accessible videos improve UX, SEO, and legal compliance.