HTML Video
In this page:
Embedding Video Natively
To embed a video, you use the video tag. Inside this container, you place source elements pointing to your video file paths, which allows the browser to select and play the first compatible format it finds.
Note: Offer multiple file formats (like WebM and MP4) to ensure your videos play on all devices.
Warning: Always write fallback text inside your video tag to assist users on ancient, unsupported devices.
Example: Embedding Video Natively
<video controls>
<source src="movie.mp4" type="video/mp4">
</video>Playback Controls (controls)
By default, browsers display video files as a static image unless you include the controls attribute. The controls attribute tells the browser to display standard system buttons for playing, pausing, adjusting volume, and fullscreen mode.
Note: Always include the controls attribute unless you are designing a silent background video loop.
Warning: Failing to add the controls attribute will render your video as a static image that users cannot interact with.
Example: Playback Controls (controls)
<video src="movie.mp4" controls></video>Auto-playing and Muting Video
Modern browsers block video files from auto-playing with sound enabled to protect user experience. To make a video start playing automatically on page load, you must include both the autoplay and muted attributes.
Note: Use a silent, looping video as an eye-catching background banner for your pages.
Warning: Attempting to auto-play video files with sound enabled will be blocked by the browser.
Example: Auto-playing and Muting Video
<video src="movie.mp4" autoplay muted></video>Poster Thumbnail Images
Before your video begins playing or while it is downloading, the player block can look blank and empty. The poster attribute allows you to define a custom placeholder image (like a thumbnail) to display in the player block.
Note: Use a high-quality poster image to capture user attention and describe your video topic.
Warning: Make sure your poster image has the same aspect ratio as your video file to prevent design distortion.
Example: Poster Thumbnail Images
<video src="movie.mp4" controls poster="thumbnail.jpg"></video>Adding Subtitles with track
To make your videos accessible to hearing-impaired users and people who watch videos with sound muted, you can add subtitles using the track element. This element references a standard WebVTT (.vtt) text file that displays timed text captions on the screen.
Note: Set the default attribute on your track tag to display subtitles automatically.
Warning: Ensure your WebVTT caption file is hosted securely and is free of syntax errors to guarantee accurate caption synchronization.
Example: Adding Subtitles with track
<video src="movie.mp4" controls>
<track src="captions.vtt" kind="subtitles" srclang="en" default>
</video>playsinline for Mobile Video
On many mobile browsers, especially iOS Safari, videos automatically expand to fullscreen the moment they start playing unless you add the playsinline attribute. This attribute tells the browser to play the video embedded in the page exactly where it is, which is essential for autoplaying background videos or inline previews.
Note: Always include playsinline alongside autoplay and muted on mobile-friendly video embeds, or the fullscreen jump will surprise users.
Warning: Without playsinline, a muted autoplay video can suddenly take over the entire screen on an iPhone, which feels broken and jarring to users.
Example: playsinline for Mobile Video
<video src="movie.mp4" autoplay muted playsinline></video>Multiple Source Formats (mp4, webm, ogg)
Not every browser supports every video format. By listing multiple source elements inside a video tag, each pointing to a different file format, the browser automatically picks the first one it can play and ignores the rest.
Note: Provide at least mp4 and webm — together they cover the vast majority of modern browsers, with mp4 as the reliable fallback.
Warning: The order of source elements matters — browsers use the first format they support, so list your most preferred or highest quality format first.
Example: Multiple Source Formats (mp4, webm, ogg)
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogg" type="video/ogg">
</video>Video Accessibility Best Practices
Accessible video means providing captions for people who are deaf or hard of hearing, a text transcript for screen reader users, and never relying on autoplay with sound, which can be disorienting or even trigger issues for some users. Combined with the track element for captions, these practices make video content usable by everyone.
Note: Always provide captions using the track element rather than assuming users will turn on sound or lip-read a video.
Warning: Autoplaying video with sound on by default is both an accessibility problem and a common source of user frustration — always default to muted.
Example: Video Accessibility Best Practices
<video src="movie.mp4" controls muted>
<track src="captions.vtt" kind="captions" srclang="en" default>
</video>- Forgetting to include the controls attribute, leaving users unable to interact with your video.
- Attempting to auto-play video files with sound enabled, which modern browsers will block.
- Omitting poster attributes on slow-loading videos, leaving the player block blank during page load.
- The video tag embeds a native, mobile-friendly media player directly inside your webpage.
- Always include controls for user convenience, and provide both WebM and MP4 formats to ensure maximum browser support.
- Use the poster attribute to display custom placeholder thumbnails, and track tags to add timed text subtitles for web accessibility.
HTML5 video and track elements are supported natively by all modern web browsers.
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: