The HTML <video> element embeds video files—such as MP4, WebM, and Ogg clips—directly into web pages, offering built-in playback controls, poster thumbnail preview images, and subtitles.
The <video> tag supports multiple nested <source> tags to ensure cross-browser compatibility:
<video width="800" height="450" controls poster="cover.jpg" preload="metadata">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
Your browser does not support the video tag.
</video>
Key video attributes:
controls: Displays native browser play, pause, volume, seeker, and fullscreen controls.poster: Specifies an image URL displayed while the video downloads or before playback begins.autoplay: Starts playback automatically (must be paired with muted to work in modern browsers).loop: Automatically restarts video playback when reaching the end.muted: Silences default video audio output.<track>: Supplies .vtt timed text files for subtitles and closed captions.flowchart TD
A["<video> Tag Execution"] --> B{"Browser supports WebM?"}
B -- Yes --> C["Play video.webm source"]
B -- No --> D{"Browser supports MP4?"}
D -- Yes --> E["Play video.mp4 source"]
D -- No --> F["Display Fallback Text Message"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Video Demonstration</title>
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; padding: 2rem;">
<h2>Product Feature Preview Video</h2>
<!-- Styled responsive video container -->
<div style="background-color: #1e293b; padding: 1rem; border-radius: 12px; max-width: 700px;">
<video
controls
poster="https://images.unsplash.com/photo-1518770660439-4636190af475"
style="width: 100%; height: auto; border-radius: 8px; display: block;"
preload="metadata">
<source src="https://www.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML video.
</video>
</div>
</body>
</html>
muted when using autoplay: Browsers strictly block autoplaying videos that contain active audio tracks.poster image: Displaying a poster image prevents a blank black video box from showing before media loads.<track> subtitle files: Closed captions ensure hearing-impaired users and users in silent environments can read video dialogue.Write a <video> tag configured with controls, muted, loop, and explicit width="640" dimensions!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.