HTML5 video tag generator with sources, poster and captions

List your video files, add a poster and a captions file, and get an HTML5 video element with a source for each format, a captions track labelled in plain language, a download fallback, and muted plus playsinline added automatically when you choose autoplay.

Live demo · real result from this tool

Press Generate to create a result.

Processed on your device — nothing is uploaded.

How to use the video tag generator

  1. Enter the Sources (one URL per line, best format first), for example a WebM file and then an MP4.
  2. Add a Poster image shown before playback, and the Width and Height in pixels (0 to leave out).
  3. Tick Controls, Autoplay (adds muted and playsinline), Loop and Muted as needed, and choose Preload.
  4. Enter a Captions file (WebVTT) and the Captions language code, such as en or hi.
  5. Copy the code and read the notes.

What it does and when to use it

The video element plays your own files with the browser’s built-in player: no third-party scripts, no tracking and no adverts. It needs a few things to work well everywhere. There should be a source per format with the right MIME type, so the browser can skip files it cannot play without downloading them. A poster gives a still image before playback. Width and height reserve space so the page does not jump. A captions track makes the speech readable.

Use it for product tours, tutorials, hero loops and recorded talks hosted on your own site or a CDN. For a video hosted on YouTube or Vimeo, use their embed code with the iFrame Generator. For sound only, the HTML Audio Tag Generator writes the matching audio element.

How it works

The MIME type comes from each file’s extension: .mp4 and .m4v are video/mp4, .webm is video/webm, .ogv and .ogg are video/ogg, and .mov is video/quicktime. Unknown extensions get no type. The captions label is the language’s English name, worked out from the code with the browser’s Intl.DisplayNames, so hi becomes “Hindi”. The track is marked default so captions are available straight away. A paragraph with a download link to the last source is added for browsers that cannot play any of the files. There is no preview because the URLs are placeholders until you upload your files.

Worked examples

The default product tour:

<video width="1280" height="720" poster="/media/product-tour-poster.jpg" controls preload="metadata">
  <source src="/media/product-tour.webm" type="video/webm">
  <source src="/media/product-tour.mp4" type="video/mp4">
  <track kind="captions" src="/media/product-tour.en.vtt" srclang="en" label="English" default>

A silent hero loop. One MP4, Autoplay and Loop ticked, Controls off, no captions file. The tag becomes <video autoplay loop muted playsinline preload="metadata">, with two notes: muted and playsinline were added, and captions are recommended if the video has speech.

Hindi captions. Captions file /media/tour.hi.vtt with language hi gives a track ending in srclang="hi" label="Hindi" default>.

Limits and tips

  • The tool does not convert files. Create the WebM and MP4 versions with a video tool first.
  • Compress the poster image with the Image Compressor; it loads even if nobody presses play.
  • For several caption languages, copy the track line and change src, srclang and label. Keep default on one track only.

Frequently asked questions

Why will my video not autoplay?
Browsers only autoplay video that is muted, and iPhones also need playsinline so the video does not jump to full screen. When you tick Autoplay, the tool adds both. If you remove muted later, autoplay will stop working in most browsers.
Why list both WebM and MP4?
The browser plays the first source it supports, reading from the top. WebM files are often smaller, and MP4 with H.264 plays almost everywhere, so WebM first and MP4 second gives most visitors the smaller file while keeping a safe fallback.
What is a WebVTT file?
A plain text file of timed captions, starting with the line WEBVTT, followed by cues such as 00:00:01.000 --> 00:00:04.000 and the words spoken. Captions help deaf and hard-of-hearing viewers and anyone watching without sound.
What does preload do?
metadata, the default here, loads only the duration and size, so the page stays light. none loads nothing until the visitor presses play, which saves data for videos far down the page. auto lets the browser download as much as it likes.
Should a background video have controls?
Even a silent background loop should be possible to pause, because moving content can distract or make some people feel unwell. Keep Controls on, or add your own pause button.

How do we know nothing is uploaded? Test it yourself on the privacy proof page.

Written by the ToolsRift team · Last updated

Pages are drafted with AI assistance and checked by automated tests. How we write and check pages.

Was this tool useful?

Report a problem

Related tools

Start typing to search every tool.

↑ ↓ to moveEnter to openEsc to close