Learn HTML – Part 29 – video Tag – Embedding Video
The HTML video tag is used to embed video content directly in a webpage.
This HTML5 element allows browsers to play videos without requiring external plugins.
What is the video Tag?
The video tag defines video content such as tutorials, movies, or demonstrations that can be played directly in the browser.
It supports several video formats including MP4, WebM, and OGG.
Basic Syntax
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
The controls attribute displays built-in video controls such as play, pause, volume, and fullscreen.
Example – Embedding a Video
<video width="400" controls>
<source src="sample-video.mp4" type="video/mp4">
</video>
Output:
Common video Tag Attributes
| Attribute | Description |
|---|---|
controls | Displays video playback controls |
autoplay | Automatically starts playing the video |
loop | Repeats the video continuously |
muted | Starts the video in muted mode |
width | Sets the width of the video player |
height | Sets the height of the video player |
Supporting Multiple Video Formats
Different browsers support different video formats. You can include multiple sources.
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
Why Use the video Tag?
- Allows embedding videos directly in webpages
- Works without external plugins
- Provides built-in playback controls
- Supports multiple video formats
The
videotag makes it easy to display videos using modern HTML5 features.
Common Mistakes Beginners Make
- Forgetting to include the
controlsattribute - Using unsupported video formats
- Using autoplay which can annoy users
Conclusion
The HTML video tag allows developers to embed video files directly in webpages.
It provides built-in playback controls and supports multiple video formats for better compatibility.
What’s Next?
Now that you understand the video tag, the next step is learning about the iframe tag, which is used to embed external content such as YouTube videos or other webpages.
Next: Learn HTML – Part 30 – iframe Tag – Embedding External Content →
Series: Learn HTML Series
