CodesBeautify

HTML Video Generator

Assemble a video element with a poster, sensible preload, captions and a fallback source.

Video embed HTMLPlayer with controls
<video width="640" preload="metadata" controls playsinline>
  <source src="https://example.com/media/tour.mp4" type="video/mp4">
  <p>Your browser cannot play this video. <a href="https://example.com/media/tour.mp4">Download the file</a> instead.</p>
</video>
Runs locally in your browser

About the HTML Video Generator

This builder assembles a video element with the attributes that matter on real pages: a poster image so the frame is not black before playback starts, preload="metadata" so the browser fetches duration and dimensions without pulling megabytes of footage, and playsinline so an iPhone plays the clip where it sits instead of taking over the whole screen.

Autoplay is the attribute that fails most often. Every current browser blocks video that starts with sound, so switching autoplay on here also adds muted, which is the only combination that reliably plays without a tap. The optional WebM source is listed before the MP4 because a browser picks the first type it can decode, and the captions option emits a track element pointing at a WebVTT file you supply alongside the video.

The paragraph inside the element is shown only when video is unsupported, and it links to the file so the content is never entirely lost. Serve the media from a host that answers range requests, otherwise seeking in the timeline will not work and the clip can only be watched from the beginning. For sound without pictures, the Music Code Generator writes the equivalent audio element.

How to use

  1. Paste the URL of your MP4 file and, if you have one, a poster image.
  2. Leave preload on metadata unless you know people will press play.
  3. Add a WebM source or a captions track if you have those files.
  4. Copy the element and upload the video to a host that supports range requests.

Common questions

Why does autoplay not work?
Browsers block media that starts with sound. Adding muted alongside autoplay is what makes playback start, and this tool adds it for you.
Which format should I supply?
MP4 with H.264 plays everywhere. WebM is a smaller optional extra that modern browsers will pick first when it is listed first.
What does preload metadata do?
It fetches only the duration and dimensions, so the player can size itself and show a timeline without downloading the whole file.
How do I add subtitles?
Point a track element at a WebVTT file with kind captions, which is what the captions option writes for you.