Video Belongs on the Modern Web

From tutorials and product demonstrations to educational content and creative projects, video is everywhere online.

HTML makes it possible to add a video player directly to your page using the <video> element. No browser plugin is required!

Meet the <video> Element

The simplest video player needs a video file and the controls attribute.

<video controls width="640">
  <source src="my-video.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>

The <source> element points to the media file. The type attribute helps the browser determine whether it can play that format.

Without controls, the browser typically won’t show the familiar Play, Pause, and timeline interface.

Control How Your Video Behaves

The video element supports several useful attributes that change the viewing experience.

<video
  controls
  muted
  loop
  playsinline
  preload="metadata"
  width="640"
>
  <source src="my-video.mp4" type="video/mp4">
</video>

• controls displays playback controls.
• muted starts playback without audio.
• loop repeats the video when it finishes.
• playsinline requests inline playback on supported mobile devices.
• preload="metadata" hints that the browser should fetch basic media information.
• poster sets an image to display before playback.

Support More Browsers

Different browsers and devices may support different video codecs and containers. You can offer multiple sources so the browser can choose one it supports.

<video controls width="640">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>

The browser checks the sources in order and attempts to use a playable one. MP4 and WebM are common web video containers, but actual playback also depends on the codecs inside the file.

Make Video More Inclusive

Captions help people who are deaf or hard of hearing, and they’re useful for anyone watching with the sound off.

Use the <track> element to connect a WebVTT caption file to your video.

<video controls width="640">
  <source src="lesson.mp4" type="video/mp4">
  <track
    kind="captions"
    src="captions-en.vtt"
    srclang="en"
    label="English"
    default
  >
</video>

A WebVTT file contains time-coded caption text. For meaningful spoken content, provide accurate captions and consider a transcript as well.

Make Your Player Fit Any Screen

A video that looks perfect on desktop shouldn’t overflow on a phone. A few CSS rules can help your player adapt.

<style>
  video {
    display: block;
    width: 100%;
    max-width: 800px;
    height: auto;
    border-radius: 12px;
    background: #0b1426;
  }
</style>

<video controls>
  <source src="my-video.mp4" type="video/mp4">
</video>

Using width: 100% with a sensible max-width lets the player shrink for smaller screens without growing too large.

Build Your Own Player Buttons

HTML gives you a ready-made player, but JavaScript lets you create custom controls too.

<video id="myVideo" controls>
  <source src="my-video.mp4" type="video/mp4">
</video>

<button type="button" id="toggle">
  Play / Pause
</button>

<script>
  const video = document.getElementById("myVideo");

  document.getElementById("toggle")
    .addEventListener("click", function() {
      if (video.paused) {
        video.play();
      } else {
        video.pause();
      }
    });
</script>

You can also use currentTime to jump to a point in the video and muted to control sound.