How to use video tag in html

HtmlHow-ToBeginner · 3 min read

How to Use the Video Tag in HTML: Simple Guide

Use the <video> tag in HTML to embed videos on a webpage. Include src for the video file and optional controls like controls to let users play or pause the video.

📐

Syntax

The <video> tag is used to add video content. You can specify the video file with the src attribute or use nested <source> tags for multiple formats. The controls attribute adds play, pause, and volume controls. You can also set width and height to control the video size.

html

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

Output

A video player with play/pause controls sized 640x360 pixels.

💻

Example

This example shows a video embedded with controls and fallback text 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 Tag Example</title>
</head>
<body>
  <video controls width="480">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</body>
</html>

Output

A video player with controls that plays a flower video, sized 480 pixels wide.

⚠️

Common Pitfalls

Not including the controls attribute makes the video play without user controls, which can confuse users.
Using only one video format may cause the video not to play in some browsers; include multiple <source> tags with different formats.
Forgetting fallback text leaves users without information if their browser does not support the video tag.

html

<!-- Wrong: No controls and single format -->
<video src="video.avi"></video>

<!-- Right: Controls and multiple formats -->
<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>

📊

Quick Reference

Here is a quick summary of common <video> tag attributes:

Attribute	Description
src	URL of the video file
controls	Shows play, pause, and volume controls
autoplay	Starts playing the video automatically
loop	Repeats the video when it ends
muted	Starts the video muted
width	Width of the video player in pixels
height	Height of the video player in pixels

✅

Key Takeaways

Use the

Include multiple tags with different formats for better browser support.

Always add fallback text inside the

Set width and height attributes to control the video size on the page.

Avoid autoplay without muted attribute to prevent unexpected sound.