The
<video>tag is used to embed video files directly into a webpage.
It supports multiple formats such as MP4, WebM, and Ogg, and provides built-in playback controls for users to play, pause, or adjust volume.
Syntax
<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>Attributes
| Attribute | Description | Example |
|---|---|---|
src | Specifies the path to the video file. | src="movie.mp4" |
controls | Displays video playback controls. | controls |
autoplay | Automatically plays the video. | autoplay |
loop | Repeats the video after finishing. | loop |
muted | Starts the video with sound muted. | muted |
poster | Specifies an image to show before the video starts. | poster="preview.jpg" |
width / height | Sets the dimensions of the video player. | width="640" height="360" |
preload | Indicates how the video should be preloaded: none, metadata, or auto. | preload="metadata" |
crossorigin | Manages CORS requests for the video element. | crossorigin="anonymous" |
Example
<!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>
<h2>Example: Embedding a Video</h2>
<video width="640" height="360" controls poster="preview.jpg">
<source src="https://assets.mixkit.co/videos/4834/4834-720.mp4" type="video/mp4">
<source src="https://assets.mixkit.co/videos/4834/4834-720.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</body>
</html>Output
Browser Output
Displays a built-in video player with play, pause, progress bar, and volume controls.
Use our Try It Editor to view and test video playback directly in your browser.
Browser Support
Chrome | Firefox | Edge | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
The <video> element is supported across all major browsers starting from Internet Explorer 9.
Older browsers (IE8 and below) do not support HTML5 video playback.
Notes
- You can include multiple
<source>elements for different video formats to ensure compatibility. - The
posterattribute helps improve user experience by showing a thumbnail before playback starts. - Avoid using
autoplaywithoutmuted, as modern browsers block auto-playing videos with sound.
Conclusion
The <video> tag provides a native, flexible, and browser-friendly way to embed video content.
It replaces older plugins like Flash and supports modern formats and responsive attributes for seamless integration across devices.