Home 〉 HTML Tutorials 〉 HTML Video Tag Tutorial with Syntax, Attributes & Examples
HTML Video Tag Tutorial with Syntax, Attributes & Examples !
HTML Video Tag Tutorial with Syntax, Attributes & Examples !
Curious how to embed video in HTML easily?
This detailed blog post on the HTML '<video>' tag explains how to embed videos using syntax, attributes like 'controls', 'autoplay', and 'poster', and customize the layout with inline CSS. We also discussed whether it's a block-level element, shared detailed examples, and included related topics to help you rank higher on search engines. This step-by-step HTML video tag tutorial is ideal for both beginners and advanced developers.
Introduction
The '<video>' tag in HTML5 allows you to embed video files directly into a webpage. It is a modern, powerful feature that enables developers to include multimedia content without relying on third-party plugins like Flash. Whether you're building an educational platform, portfolio, or entertainment site, the '<video>' element enhances user engagement and interactivity.
The '<video>' element is a block-level element. It occupies the full width of its parent container and starts on a new line.
Syntax of the HTML '<video>' Tag
Syntax ✍
<video controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
- '<video>': The container element that embeds the video.
- 'controls': Adds playback controls like play, pause, and volume.
- '<source>': Specifies the video file and its type.
- Fallback text: Shown if the browser doesn't support the video tag.
HTML '<video>' Tag Attributes (with Examples)
1. 'src'
Defines the video file URL.
Code : 1 📝 
<!DOCTYPE html>
<html>
<body>
<video src="/images/video.mp4" controls width="300"></video>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Displays the video with the file 'video.mp4'.
2. 'controls'
Adds default video controls.
Code : 2 📝
<!DOCTYPE html>
<html>
<body>
<video src="/images/video.mp4" controls></video>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Users can play, pause, mute, and control volume.
3. 'autoplay'
Starts playing the video automatically (muted for autoplay to work properly on most browsers).
Code : 3 📝
<!DOCTYPE html>
<html>
<body>
<video src="/images/video.mp4" autoplay muted></video>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
4. 'loop'
Loops the video continuously.
Code : 4 📝
<!DOCTYPE html>
<html>
<body>
<video src="/images/video.mp4" loop controls></video>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
5. 'muted'
Mutes the video on load.
Code : 5 📝
<!DOCTYPE html>
<html>
<body>
<video src="/images/video.mp4" muted controls></video>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
6. 'poster'
Displays an image before the video plays.
Code : 6 📝
<!DOCTYPE html>
<html>
<body>
<video src="/images/video.mp4" poster="/images/image-of-video.jpg" controls></video>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
7. 'width' and 'height'
Sets the video dimensions.
Code : 7 📝
<!DOCTYPE html>
<html>
<body>
<video src="/images/video.mp4" width="400" height="300" controls></video>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Inline CSS Styling for Video Tag
Here's a sample with best inline CSS for a responsive and styled video block:
Code : 8 📝
<!DOCTYPE html>
<html>
<body>
<video src="/images/video.mp4" controls
style="width:100%; height:auto; border:2px solid #000; border-radius:10px; background-color:#f9f9f9; padding:5px;">
</video>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Conclusion
The '<video>' tag is a powerful feature in HTML5 that helps you add video content directly to your webpages without external plugins. By mastering its attributes and using inline CSS, you can control the video layout, appearance, and behavior for a better user experience. Whether you're showing tutorials, promos, or entertainment, the '<video>' element is essential for modern web development.
Suggested Topics:
- Complete Guide to HTML Attributes with Examples and Syntax
- HTML Block, Inline, and Empty Elements Explained with Examples
- CSS background-color Tutorial with Examples - Learn Easily
- CSS Border Property Explained with Easy Examples for Beginners
- CSS Border-Radius Property Explained with Examples for Beginners
- CSS Padding Explained with Examples | CSS Box Model Guide
- CSS Width and Height Property Tutorial with Examples for Beginners
Related Topics:
- HTML Audio Tag Tutorial with Examples and Attributes | Learn HTML5 '<audio>' Element
- HTML img Tag | Complete Guide to HTML Image Tag with Syntax & Attributes
Frequently Asked Questions (FAQs)
Can I use multiple source files in a video tag?
Yes, using multiple '<source>' tags allows browsers to choose the best-supported format.
Why is my video not autoplaying?
Autoplay requires the 'muted' attribute in modern browsers.
Can I add subtitles to HTML videos?
Yes, use the '<track>' tag inside '<video>' for subtitles.
What video formats are supported in HTML?
Common formats: '.mp4', '.webm', and '.ogg'.