HTML video: Playback Controls, Autoplay, Responsive Sizing, and Troubleshooting

HTML video embeds a video player in a webpage. Set the file URL with src or child source elements, and add controls so users can play and pause it. Browser policies can block automatic playback even when autoplay is present.

Choose attributes for the playback experience

controls, muted, autoplay, and loop are Boolean attributes. Their presence enables them, so autoplay="false" does not disable autoplay. Remove the attribute to turn it off. An autoplay request needs media loading, so preload="none" alone cannot prevent downloading.

Run a complete video example

Save this code as video.html and open it in a browser. It loads the public flower sample used in MDN documentation and needs an internet connection. For your own service, host video you have the right to use and replace the URLs.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML video playback</title>
  <style>
    body { margin: 24px; font-family: sans-serif; }
    video { display: block; width: 640px; max-width: 100%; height: auto; }
  </style>
</head>
<body>
  <h1>Flower video</h1>
  <video id="flower" controls playsinline preload="metadata" aria-label="Flowers swaying in the wind">
    <source src="https://developer.mozilla.org/shared-assets/videos/flower.webm" type="video/webm">
    <source src="https://developer.mozilla.org/shared-assets/videos/flower.mp4" type="video/mp4">
    This browser does not support the video element.
  </video>
  <p>Scene description: flowers and nearby grass sway in the wind.</p>
  <p><a href="https://developer.mozilla.org/shared-assets/videos/flower.mp4"
    target="_blank" rel="noopener noreferrer">Open the MP4 video file</a></p>
</body>
</html>

1. Check for a player with a play button and start it. Flowers should move and the playback position should advance. The default example has no autoplay or loop attribute.
2. Pause playback to stop the motion. On a narrow window the player should shrink within the content width.
3. To compare repetition, add only loop to the opening video tag and reopen the file. Check that playback returns to the start after reaching the end, then remove the attribute to restore the original behavior.

source offers file formats so the browser can choose a supported candidate. Prepare real WebM and MP4 files of the same video; changing a filename extension does not convert formats. Playback also depends on the codecs used for video and audio inside a container such as MP4.

Autoplay and mobile sizing

If you need automatic playback, compare by adding autoplay muted to the opening video tag. Keep playsinline and controls. User preferences, power-saving policies, site interaction history, or other browser rules can deny autoplay, so retain a play button.

The CSS width: 640px is the desired display width, while max-width: 100% limits overflow in a narrow parent. height: auto preserves the video’s aspect ratio. If you define a fixed-ratio frame, object-fit: contain preserves the whole scene, while cover fills the frame by cropping some edges; check that important content remains visible.

Troubleshoot playback and check accessibility

• File URL: Open the video link directly and confirm the file exists and is available without login. Check that a local path has not been mistaken for a server path, and that filename capitalization matches.
• Format and response: Check that the server sends the correct video/mp4 or video/webm MIME type and uses supported codecs. The Network panel in developer tools helps inspect failed requests and response headers.
• Autoplay: If pressing Play works, distinguish an autoplay restriction from a broken file.
• Fallback guidance: Text inside video is for browsers that do not support the element. In modern browsers, a loading failure does not automatically display it as an error message. The example therefore puts a file link and scene description outside the player too.
• Captions and descriptions: Provide accurate captions and a transcript where needed for speech. Connect subtitles with track and a WebVTT file. Consider a text description or audio description for essential information conveyed only visually.

See the MDN video reference for attributes and the MDN guide to video captions for subtitle files.