Syntax
<video src="movie.mp4" controls width="640"></video>Examples
Basic Video Player
A video with standard browser playback controls.
<video controls width="640" height="360">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>Multiple Source Formats
Providing fallback formats for broader browser support.
<video controls width="640">
<source src="movie.webm" type="video/webm">
<source src="movie.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>Autoplay Muted Background Video
A common pattern for looping background videos.
<video autoplay muted loop playsinline style="width: 100%; object-fit: cover;">
<source src="background.mp4" type="video/mp4">
</video>Attributes
- controls (boolean): Shows the browser's built-in playback controls
- autoplay (boolean): Starts playback automatically (most browsers require muted for this to work)
- loop (boolean): Restarts the video automatically when it ends
- muted (boolean): Mutes audio by default
- poster (URL): An image shown before playback starts
Best practices
- Always include the controls attribute unless you have a very specific reason to hide them — autoplay-only videos are a poor user experience
- Autoplay only works reliably in most browsers when combined with muted
- Provide multiple <source> formats (MP4, WebM) for cross-browser compatibility
- Include fallback text between the tags for very old browsers that do not support <video>
- Use the poster attribute to show a meaningful thumbnail before playback
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
<img>
The <img> element embeds images into web pages. Images enhance visual communication and user engagement. The src attribute specifies the image source, while alt provides alternative text for accessibility and SEO. Images are inline-replaced elements, meaning they display in the flow of text but are replaced with the actual image content.<figure>, <figcaption>
The <figure> element wraps self-contained content — typically an image, illustration, diagram, code snippet, or chart — along with an optional caption provided by <figcaption>. Content in a figure is meant to be referenceable independently of the main flow; a reader should be able to move it elsewhere on the page (or even to an appendix) without breaking the document's meaning.<audio>
The <audio> element embeds sound content — music, podcasts, or sound effects — directly in a page. Like <video>, it supports multiple <source> elements for format fallback and built-in playback controls, without needing Flash or other plugins.<iframe>
The <iframe> element embeds another HTML document within the current page, creating a nested browsing context. It is commonly used for embedding maps, videos from external platforms, payment widgets, or ads. Because it loads content from potentially untrusted sources, the sandbox attribute is important for restricting what an embedded page is allowed to do.
The <img> element embeds images into web pages. Images enhance visual communication and user engagement. The src attribute specifies the image source, while alt provides alternative text for accessibility and SEO. Images are inline-replaced elements, meaning they display in the flow of text but are replaced with the actual image content.<figure>, <figcaption>
The <figure> element wraps self-contained content — typically an image, illustration, diagram, code snippet, or chart — along with an optional caption provided by <figcaption>. Content in a figure is meant to be referenceable independently of the main flow; a reader should be able to move it elsewhere on the page (or even to an appendix) without breaking the document's meaning.<audio>
The <audio> element embeds sound content — music, podcasts, or sound effects — directly in a page. Like <video>, it supports multiple <source> elements for format fallback and built-in playback controls, without needing Flash or other plugins.<iframe>
The <iframe> element embeds another HTML document within the current page, creating a nested browsing context. It is commonly used for embedding maps, videos from external platforms, payment widgets, or ads. Because it loads content from potentially untrusted sources, the sandbox attribute is important for restricting what an embedded page is allowed to do.