HTML5 Video Tag Generator - Create Video Embed Code Online
Generate production-ready HTML5 video tag code with all attributes. Configure sources, tracks, fallback, autoplay, controls, and more.
Preview renders your exact markup. Video will only play if the source URLs are valid and accessible.
About
The HTML5 <video> element replaced Flash-based players but carries configuration complexity that silently breaks playback across browsers. A missing type attribute on a <source> element forces the browser into MIME sniffing, adding 200 - 500ms of latency before first frame. Omitting the playsinline attribute on iOS Safari causes fullscreen hijacking. Forgetting muted alongside autoplay violates autoplay policies in Chrome, Firefox, and Safari, resulting in zero playback with no console error in production. This generator produces spec-compliant markup with correct attribute ordering, proper <source> fallback chains, <track> elements for subtitles and captions (required under WCAG 2.1 Level AA, Success Criterion 1.2.2), and a text fallback for legacy agents. It does not guess. You configure each attribute explicitly, and it emits only what you set. The output follows the WHATWG HTML Living Standard parsing rules. Note: preload is advisory only. Browsers may ignore it on cellular connections to conserve bandwidth.
Formulas
The HTML5 video element follows the WHATWG source selection algorithm. Given n <source> children, the browser evaluates each in document order:
canPlayType(typei) → { "", "maybe", "probably" }
The first source where the return value ≠ "" is selected for loading. If all sources return empty string, a error event fires on the <video> element with error.code = 4 (MEDIA_ERR_SRC_NOT_SUPPORTED).
Autoplay gating logic (Chrome): autoplay is permitted if muted = TRUE ∨ MEI ≥ 0.5, where MEI is the Media Engagement Index, a per-origin score in range [0, 1] based on prior significant playback events.
Attribute output template: <video [attr1] [attr2] … [attrn]> { <source>×s } { <track>×t } [fallback] </video>
Where s = number of source elements (0 - 5), t = number of track elements (0 - 3), and fallback is plain text displayed by non-supporting user agents.
Reference Data
| Attribute | Type | Default | Browser Notes |
|---|---|---|---|
| src | URL | none | Use <source> for multi-format fallback |
| controls | Boolean | FALSE | Native UI varies by browser; custom controls override |
| autoplay | Boolean | FALSE | Requires muted in Chrome 66+, Safari 11+ |
| muted | Boolean | FALSE | Required for autoplay; persists across page loads in some browsers |
| loop | Boolean | FALSE | Universal support; fires ended event before restart |
| playsinline | Boolean | FALSE | Critical for iOS Safari inline playback |
| preload | Enum | auto | Values: none, metadata, auto. Advisory only. |
| poster | URL | none | Displayed before playback; JPEG recommended for size |
| width | Integer (px) | none | CSS override takes precedence; aspect ratio preserved if one set |
| height | Integer (px) | none | Same as width; both optional with CSS sizing |
| crossorigin | Enum | none | Values: anonymous, use-credentials. Required for canvas capture. |
| disablepictureinpicture | Boolean | FALSE | Chrome only; no Firefox/Safari support as of 2024 |
| disableremoteplayback | Boolean | FALSE | Prevents casting to Chromecast / AirPlay |
| <source> | Element | - | Order matters: browser picks first playable format |
| <track> | Element | - | kind: subtitles, captions, descriptions, chapters, metadata |
| MIME: video/mp4 | Format | - | H.264 baseline: universal. H.265/HEVC: Safari, Edge |
| MIME: video/webm | Format | - | VP8/VP9: Chrome, Firefox, Edge. No Safari. |
| MIME: video/ogg | Format | - | Theora: Firefox, Chrome. Declining usage. |
| MIME: video/mp4; codecs="av01" | Format | - | AV1: Chrome 70+, Firefox 67+. Best compression. |
| MIME: application/x-mpegURL | Format | - | HLS: Safari native. Others need hls.js library. |