The HTML5 video element makes it simple to embed video content directly into web pages without plugins. You can add tutorials, demonstrations, promotional content, or any video media with native HTML support.
The Video Element
The <video> element embeds video content in documents. Like the audio element, it can contain one or more video sources.
Basic Video
<video src="tutorial.mp4" controls width="640" height="360">
Your browser does not support the video element.
</video>Video Attributes
controls
The controls attribute displays the browser's default video controls (play, pause, volume, progress, fullscreen):
<video src="demo.mp4" controls width="800" height="450">
Your browser does not support the video element.
</video>width and height
Always specify width and height to prevent layout shift:
<video src="video.mp4" controls width="1280" height="720">
Your browser does not support the video element.
</video>poster
The poster attribute specifies an image to display before the video plays:
<video src="promo.mp4"
controls
width="1920"
height="1080"
poster="thumbnail.jpg">
Your browser does not support the video element.
</video>autoplay
The autoplay attribute makes the video start automatically:
<video src="intro.mp4" autoplay muted controls width="800" height="450">
Your browser does not support the video element.
</video>⚠️ Important About Autoplay:
Most browsers will only allow autoplay if the video is muted. Autoplay with sound is blocked to prevent annoying user experiences. Always include muted when using autoplay.
loop
The loop attribute makes the video repeat continuously:
<video src="background.mp4" loop muted autoplay width="1920" height="1080">
Your browser does not support the video element.
</video>muted
The muted attribute starts the video with sound turned off:
<video src="banner.mp4" muted autoplay loop width="1600" height="900">
Your browser does not support the video element.
</video>preload
The preload attribute suggests how the browser should load the video:
<!-- Don't preload -->
<video src="video.mp4" preload="none" controls width="800" height="450"></video>
<!-- Preload metadata only -->
<video src="video.mp4" preload="metadata" controls width="800" height="450"></video>
<!-- Preload entire video -->
<video src="video.mp4" preload="auto" controls width="800" height="450"></video>playsinline
The playsinline attribute prevents fullscreen playback on mobile devices:
<video src="video.mp4" controls playsinline width="800" height="450">
Your browser does not support the video element.
</video>Video Formats
Different browsers support different video formats. The main formats for web video are:
| Format | MIME Type | Browser Support | Quality |
|---|---|---|---|
| MP4 (H.264) | video/mp4 | All browsers | Good, widely compatible |
| WebM | video/webm | Most modern | Excellent, smaller files |
| OGG | video/ogg | Some browsers | Good, open-source |
Recommendation: Use MP4 as your primary format for maximum compatibility. WebM can be added for better compression in supporting browsers.
Multiple Video Sources
Provide multiple formats to ensure compatibility:
<video controls width="1280" height="720" poster="thumbnail.jpg">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video element.
<a href="video.mp4">Download the video</a>
</video>The browser will try each source in order and use the first one it supports.
Practical Examples
Tutorial Video
<article>
<h2>How to Build a Website</h2>
<figure>
<video controls width="1280" height="720" poster="lesson-thumbnail.jpg">
<source src="lesson-1.mp4" type="video/mp4">
<source src="lesson-1.webm" type="video/webm">
Your browser does not support the video element.
</video>
<figcaption>Lesson 1: Getting Started with HTML</figcaption>
</figure>
<p>In this lesson, you'll learn the basics of HTML...</p>
</article>Product Demo
<section class="product-demo">
<h2>See Our Product in Action</h2>
<video controls
width="1920"
height="1080"
poster="product-poster.jpg"
preload="metadata">
<source src="product-demo.mp4" type="video/mp4">
<source src="product-demo.webm" type="video/webm">
<p>
Your browser doesn't support HTML video.
<a href="product-demo.mp4">Download the video</a>
</p>
</video>
<p>Watch how easy it is to use our software...</p>
</section>Background Video
<header class="hero">
<video autoplay
muted
loop
playsinline
width="1920"
height="1080"
poster="hero-poster.jpg">
<source src="hero-background.mp4" type="video/mp4">
<source src="hero-background.webm" type="video/webm">
</video>
<div class="hero-content">
<h1>Welcome to Our Site</h1>
<p>Discover amazing products</p>
</div>
</header>Video Gallery
<section class="video-gallery">
<h2>Video Portfolio</h2>
<div class="video-grid">
<figure>
<video controls width="640" height="360" poster="project1-thumb.jpg">
<source src="project1.mp4" type="video/mp4">
</video>
<figcaption>Project 1: Brand Campaign</figcaption>
</figure>
<figure>
<video controls width="640" height="360" poster="project2-thumb.jpg">
<source src="project2.mp4" type="video/mp4">
</video>
<figcaption>Project 2: Product Launch</figcaption>
</figure>
<figure>
<video controls width="640" height="360" poster="project3-thumb.jpg">
<source src="project3.mp4" type="video/mp4">
</video>
<figcaption>Project 3: Documentary</figcaption>
</figure>
</div>
</section>Responsive Video
Make videos responsive with CSS:
/* Responsive video container */
.video-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
overflow: hidden;
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Simple responsive */
video {
max-width: 100%;
height: auto;
display: block;
}<div class="video-container">
<video controls poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
</video>
</div>Subtitles and Captions
Use the <track> element to add subtitles, captions, or descriptions:
<video controls width="1280" height="720">
<source src="video.mp4" type="video/mp4">
<!-- English subtitles -->
<track src="subtitles-en.vtt"
kind="subtitles"
srclang="en"
label="English">
<!-- Spanish subtitles -->
<track src="subtitles-es.vtt"
kind="subtitles"
srclang="es"
label="Español">
<!-- Audio descriptions -->
<track src="descriptions.vtt"
kind="descriptions"
srclang="en"
label="Audio Descriptions">
Your browser does not support the video element.
</video>VTT File Format
WEBVTT
00:00:00.000 --> 00:00:03.000
Welcome to this tutorial.
00:00:03.500 --> 00:00:07.000
In this video, we'll learn about HTML.
00:00:07.500 --> 00:00:10.000
Let's get started!Accessibility Considerations
♿ Accessibility Best Practices:
- Always include controls for user control
- Provide captions/subtitles for spoken content
- Add audio descriptions for visual-only content
- Include transcripts below the video
- Ensure keyboard navigation works
- Provide alternative text descriptions
- Don't rely solely on video to convey information
- Test with screen readers
Fully Accessible Video
<section aria-labelledby="video-title">
<h2 id="video-title">Tutorial: Getting Started with HTML</h2>
<figure>
<video controls
width="1280"
height="720"
poster="tutorial-poster.jpg">
<source src="tutorial.mp4" type="video/mp4">
<source src="tutorial.webm" type="video/webm">
<track src="captions-en.vtt"
kind="captions"
srclang="en"
label="English"
default>
<track src="descriptions.vtt"
kind="descriptions"
srclang="en"
label="Audio Descriptions">
<p>
Your browser doesn't support HTML video.
<a href="tutorial.mp4">Download the video</a>
</p>
</video>
<figcaption>A 10-minute introduction to HTML basics</figcaption>
</figure>
<details>
<summary>View Full Transcript</summary>
<div class="transcript">
<p><strong>[00:00]</strong> Welcome to this tutorial...</p>
<p><strong>[00:15]</strong> HTML stands for...</p>
</div>
</details>
</section>Performance Optimization
💡 Video Performance Best Practices:
- Compress videos before uploading
- Use
preload="metadata"orpreload="none"for better initial page load - Always specify width and height
- Provide appropriate poster images
- Consider hosting videos on dedicated platforms (YouTube, Vimeo)
- Use lazy loading for below-the-fold videos
- Optimize poster images
- Consider adaptive bitrate streaming for longer videos
Best Practices
✅ Do:
- Always include controls attribute
- Specify width and height to prevent layout shift
- Provide poster images for better user experience
- Include multiple formats for compatibility
- Add captions/subtitles for accessibility
- Compress videos to reduce file size
- Use muted with autoplay if needed
- Include fallback content and download links
❌ Don't:
- Use autoplay with sound (blocked by browsers)
- Upload uncompressed, huge video files
- Forget to add controls
- Rely only on one video format
- Omit captions for spoken content
- Forget width and height attributes
- Use videos as the only way to convey important information
Video Hosting Considerations
Self-Hosting
Pros: Full control, no external dependencies, no ads
Cons: Bandwidth costs, storage costs, no adaptive streaming
Third-Party Platforms (YouTube, Vimeo)
Pros: Free hosting, adaptive streaming, analytics, CDN delivery
Cons: Less control, potential ads, privacy concerns
Key Takeaways
- The
<video>element embeds video content - Always include
controls,width, andheight - Use
posterto show a thumbnail before playback - MP4 is the most widely supported video format
- Provide multiple formats using
<source>elements - Only use autoplay with muted attribute
- Add captions/subtitles with
<track>elements - Optimize video files and consider hosting options
What's Next?
Now that you understand video elements, you're ready to learn about embedding external content. In the next lesson, we'll explore the iframe and embed elements for including content from other websites, like YouTube videos, Google Maps, and more.