How to Embed Video in HTML5

HTML5 lets you add video directly to a web page with the <video> element. You do not need Flash, Silverlight, or another browser plugin. The basic approach is to provide one or more video files, enable the controls readers need, and include fallback text for browsers that cannot play the media.

Basic HTML5 video example

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

The browser checks the <source> elements in order and plays the first format it supports. MP4 is widely compatible, while WebM can provide an additional option. Set the correct type value so the browser can identify each file without downloading it first.

Important video attributes

• controls: Displays the browser's play, pause, volume, seek, and full-screen controls.
• width and height: Reserve space for the player while the page loads, reducing layout movement.
• poster: Shows a preview image before playback begins. Use a real image URL from your own site.
• preload: Gives the browser a loading hint. Common values are none, metadata, and auto.
• loop: Restarts the video automatically after it finishes.
• muted: Starts playback without sound when used.

Do not assume the native controls look identical in every browser. Their appearance and some available actions depend on the browser and device.

Autoplay rules

Modern browsers commonly block autoplay when a video has sound. If autoplay is essential, combine autoplay with muted and playsinline:

<video autoplay muted playsinline loop>
  <source src="background-video.mp4" type="video/mp4">
</video>

Even muted autoplay may be limited by browser settings, data-saving modes, or device policies. Design the page so it still works when the user must press Play.

Add captions for accessibility

Captions make spoken content available to people who are deaf or hard of hearing and help users watching without sound. Add a WebVTT caption file with the <track> element:

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

Also provide meaningful surrounding text or a transcript when the video contains information that readers need. Test keyboard access, captions, and playback on both desktop and mobile devices.

Troubleshooting a video that will not play

First, open the video URL directly to confirm that the file exists. Then check the file format, the server's MIME type, and the browser console for loading or cross-origin errors. A valid filename does not guarantee that the video uses a codec supported by the browser.

If you are modernizing an older page, review this guide to converting HTML4 to HTML5. If you prefer editing pages visually, the overview of WYSIWYG editors explains how visual HTML tools work.