HtmlHow-ToBeginner · 3 min read

How to Add Video in HTML: Simple Guide with Examples

To add a video in HTML, use the <video> tag with the src attribute pointing to your video file. You can add controls by including the controls attribute so users can play, pause, or adjust volume.

📐

Syntax

The <video> tag is used to embed video content in an HTML page. Key parts include:

src: The path to the video file.
controls: Adds play, pause, and volume controls.
width and height: Set the size of the video player.
autoplay: Starts playing the video automatically (use carefully).
loop: Makes the video play repeatedly.
muted: Starts the video muted.

html

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

Output

A video player with controls sized 640x360 pixels that plays 'video.mp4'. If unsupported, shows fallback text.

💻

Example

This example shows how to add a video with controls and a fallback message for browsers that do not support the video tag.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video Example</title>
</head>
<body>
  <h2>Sample Video</h2>
  <video src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" controls width="480" height="270">
    Sorry, your browser does not support embedded videos.
  </video>
</body>
</html>

Output

A webpage with a heading 'Sample Video' and a video player showing a flower video with controls to play, pause, and adjust volume.

⚠️

Common Pitfalls

Common mistakes when adding videos in HTML include:

Not including the controls attribute, which leaves users without play/pause buttons.
Using unsupported video formats; always provide multiple sources or use widely supported formats like MP4 or WebM.
Forgetting fallback text inside the <video> tag for unsupported browsers.
Setting autoplay without muted, which many browsers block.

html

<!-- Wrong: No controls and unsupported format -->
<video src="video.avi">Your browser does not support the video tag.</video>

<!-- Right: Controls added and fallback text -->
<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

Output

First video shows no controls and may not play if format unsupported. Second video shows controls and tries multiple formats with fallback text.

📊

Quick Reference

Attribute	Description	Example
src	Path to the video file
controls	Show video controls
width / height	Set player size
autoplay	Start playing automatically
loop	Repeat video
muted	Start muted

✅

Key Takeaways

Use the

Always include the controls attribute so users can control playback.

Provide multiple source formats and fallback text for best browser support.

Use autoplay only with muted to avoid browser blocking.

Set width and height to control the video player size.