<video>

Since:		HTML5（2014）

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

sample_video.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>video sample</title>
</head>
<body style="margin: 20px;">

  <!-- Basic: controls, thumbnail, multi-format fallback, and subtitle track -->
  <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">
    <!-- Adding a subtitle track -->
    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
    <p>Your browser does not support video playback.</p>
  </video>

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

  <!-- Controlling playback with JavaScript -->
  <video id="myVideo" src="sample.mp4" width="400" preload="metadata"></video>
  <button onclick="document.getElementById('myVideo').play();">Play</button>
  <button onclick="document.getElementById('myVideo').pause();">Pause</button>

</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.

View sample page

Controlling Playback with JavaScript

The video element shares the same properties and methods as audio, plus additional video-specific ones.

Property / Method	Description
play() / pause()	Starts or pauses playback.
currentTime	Gets or sets the current playback position in seconds.
duration	Returns the total duration of the video in seconds.
volume / muted	Gets or sets the volume level and muted state.
playbackRate	Gets or sets the playback speed (1.0 = normal, 2.0 = double speed).
requestFullscreen()	Requests fullscreen mode.
videoWidth / videoHeight	Returns the video's native resolution in pixels.

<video id="myVideo" src="sample.mp4" width="640" preload="metadata"></video>

<div>
  <button id="playBtn">Play</button>
  <button id="fullscreenBtn">Fullscreen</button>
  <input type="range" id="seek" min="0" step="0.1" value="0">
</div>

<script>
var video = document.getElementById('myVideo');
var playBtn = document.getElementById('playBtn');
var seekBar = document.getElementById('seek');

// Toggle play/pause
playBtn.addEventListener('click', function() {
  if (video.paused) {
    video.play();
    playBtn.textContent = 'Pause';
  } else {
    video.pause();
    playBtn.textContent = 'Play';
  }
});

// Set seek bar max once metadata is loaded
video.addEventListener('loadedmetadata', function() {
  seekBar.max = video.duration;
});

// Update seek bar as video plays
video.addEventListener('timeupdate', function() {
  seekBar.value = video.currentTime;
});

// Seek when the user drags the seek bar
seekBar.addEventListener('input', function() {
  video.currentTime = this.value;
});

// Fullscreen
document.getElementById('fullscreenBtn').addEventListener('click', function() {
  video.requestFullscreen();
});
</script>

Making Video Responsive with CSS

To make a video element responsive, set its width to 100% and height to auto. The aspect-ratio property is a convenient way to maintain a fixed aspect ratio.

<style>
  /* Simple responsive video */
  video {
    max-width: 100%;
    height: auto;
  }

  /* Fixed aspect-ratio wrapper (16:9) */
  .video-wrapper {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
  }
  .video-wrapper video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Full-page background video */
  .hero-bg-video {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: 0.5;
  }
</style>

<!-- Responsive video with a fixed aspect ratio -->
<div class="video-wrapper">
  <video controls>
    <source src="sample.webm" type="video/webm">
    <source src="sample.mp4" type="video/mp4">
  </video>
</div>

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.