HTML Video
In this page:
<video src="video-url" width="width" height="height" controls>
Fallback text
</video>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.
- Offer multiple file formats (like WebM and MP4) to ensure your videos play on all devices.
- Accepted attributes:
- src — video file URL
- controls — boolean
- width / height — pixels
- poster — image URL shown before playback
- autoplay / loop / muted — booleans
- preload — none | metadata | auto
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.
- Always include the controls attribute unless you are designing a silent background video loop.
- Accepted values:
- controls — boolean attribute (present or controls="")
- Shows play, pause, seek, volume, fullscreen
- controlslist — nodownload | nofullscreen | noremoteplayback (Chromium)
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.
- Use a silent, looping video as an eye-catching background banner for your pages.
- Accepted attributes:
- autoplay — boolean; usually needs muted
- muted — boolean
- loop — boolean
- playsinline — boolean
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.
- Use a high-quality poster image to capture user attention and describe your video topic.
- Accepted values:
- poster — URL of an image file
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.
- Set the default attribute on your track tag to display subtitles automatically.
- Accepted attributes:
- kind — subtitles | captions | descriptions | chapters | metadata
- src — URL of the .vtt file
- srclang — language code, e.g. en
- label — text shown in the track menu
- default — boolean
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.
- Always include playsinline alongside autoplay and muted on mobile-friendly video embeds, or the fullscreen jump will surprise users.
- Accepted values:
- playsinline — boolean attribute
- Plays inline instead of forcing fullscreen on iOS
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.
- Provide at least mp4 and webm — together they cover the vast majority of modern browsers, with mp4 as the reliable fallback.
- Accepted attributes:
- source src — file URL
- source type — video/mp4 | video/webm | video/ogg
- source media — media query (optional)
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.
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: