HTML <video> Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <video> element in HTML is used to embed video content directly into a web page, allowing users to play, pause, and interact with multimedia without requiring third-party plugins like Flash. It provides a native, standardized way to deliver video, making it a central component for modern web multimedia experiences.

A <video> element can contain multiple <source> elements, which allow the browser to choose the first format it supports, ensuring cross-browser compatibility. Additionally, fallback content (like a message or a link to download the video) can be placed inside the <video> tag to provide alternatives for browsers that do not support the element.

By default, the video is displayed with standard playback controls (if enabled) and respects the width and height defined either via attributes or CSS. Developers can enhance the video experience by combining it with JavaScript APIs to control playback, respond to events like play, pause, or ended, and even manipulate the video dynamically (for example, creating custom controls, adding overlays, or synchronizing with other media).

The <video> tag supports both streaming and locally hosted video files, and it integrates seamlessly with other HTML5 multimedia features like captions (<track>), playlists, and interactive media applications. Its use is a key part of building rich, interactive web content that is accessible, responsive, and widely compatible with devices from desktops to mobile phones.

Properties

Permitted Parents: Any element that accepts embedded content
Content: <source>, <track>, and text
Start/End Tags: Start tag: required, End tag: required

Example

HTML

<video width="300" height="240" controls>

  <source src="audio/toy.mp4" type="video/mp4">

  Your browser does not support the video tag.

</video>

Result

Editor

Attributes

autoplay: Specifies that the video will start playing as soon as it is ready.
controls: Specifies that video controls should be displayed (such as a play/pause button, volume control, etc.).
height: Sets the height of the video player.
loop: Specifies that the video will start over again every time it is finished.
muted: Specifies that the audio output of the video should be muted.
poster: Specifies an image to be shown while the video is downloading, or until the user hits the play button.
preload: Specifies if and how the author thinks the video should be loaded when the page loads.
src: Specifies the URL of the video file.
width: Sets the width of the video player.

Global Attributes

The <video> tag also supports the Global Attributes in HTML5

Event Attributes

The <video> tag also supports the Event Attributes in HTML5

Browser Support

The following information will show you the current browser support for the HTML <video> tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.