HTML Tags
HTML <video> Tag
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
html
<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
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>
<h2>Example: Embedding a Video</h2>
<video width="640" height="360" controls poster="https://ik.imagekit.io/html5andcss3/lesson-samples/sample_thumbnail.png">
<source src="https://ik.imagekit.io/html5andcss3/lesson-samples/sample_video.mp4" type="video/mp4">
<source src="https://ik.imagekit.io/html5andcss3/lesson-samples/sample_video.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</body>
</html>Output
Browser Output
html
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 | Edge | Firefox | 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.