<video>

The video element embeds a video into an HTML page, allowing playback directly in the browser without any plugins.

Syntax

<!-- Basic video embed -->
<video src="movie.mp4" controls></video>

<!-- Multiple formats with fallback -->
<video controls width="640" poster="thumbnail.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  <p>Your browser does not support video playback.</p>
</video>

Common Attributes

Attribute	Description
src	Specifies the URL of the video file to play.
controls	Displays a control panel with play, pause, volume, and other controls.
autoplay	Starts playback automatically when the page loads. Some browsers require the `muted` attribute for autoplay to work.
loop	Restarts the video from the beginning when it ends.
muted	Plays the video with audio muted.
poster	Specifies the URL of an image to display before the video plays.
preload	Specifies how the video data should be preloaded (none / metadata / auto).
width / height	Sets the display size of the video in pixels.

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>video sample</title>
</head>
<body>

  <!-- Video with controls -->
  <video controls width="640" height="360" poster="thumbnail.jpg">
    <!-- Prefer WebM; fall back to MP4 if not supported -->
    <source src="sample.webm" type="video/webm">
    <source src="sample.mp4" type="video/mp4">
    <p>Your browser does not support video playback.</p>
  </video>

  <!-- Background video: autoplay, loop, muted -->
  <video autoplay loop muted playsinline width="320">
    <source src="background.mp4" type="video/mp4">
  </video>

</body>
</html>

Result

The first video element shows a thumbnail image and plays the video with a control panel. The second plays automatically on loop with audio muted.

┌─────────────────────────────────────────┐
│  [thumbnail.jpg displayed as thumbnail] │
│  ▶ 0:00 ───────────────────── 🔊 ⛶    │
└─────────────────────────────────────────┘

Notes

The video element was introduced in HTML5, enabling video playback in the browser without plugins such as Flash. Supported formats vary by browser, but MP4 (H.264) is now supported by virtually all modern browsers. WebM files tend to be smaller, so specifying both formats via source elements is recommended.

Even when autoplay is specified, most browsers block autoplay when audio is enabled. For background videos or other cases where silent autoplay is needed, combine autoplay with the muted attribute. On Safari for iOS, you may also need to add the playsinline attribute to prevent the video from opening in fullscreen.

To play audio only, use the audio element.