HTML Video Generator
Build an HTML5 video player embed code with a live preview.
HTML
<video width="640" controls preload="metadata"> <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
HTML Video Generator
The HTML5 <video> element plays video files directly in the browser without plugins or third-party players. It supports multiple source formats, poster images, subtitles and all the playback options you need — but remembering the correct attributes and autoplay rules is tedious. The HTML Video Generator writes the complete embed code from a form and previews the actual player.
Options
- Sources – a main video URL and an optional second format. Each
<source>gets atypesuch asvideo/mp4orvideo/webmbased on the file extension. - Poster – an image shown before playback starts, ideal for a thumbnail or title card.
- Width and height – the intrinsic size, which also prevents layout shifts while the video loads.
- controls, autoplay, muted, loop, playsinline – boolean attributes for playback behaviour.
- preload –
metadata,autoornoneto control how much is downloaded up front. - Subtitles – a WebVTT
<track>with language and label.
Autoplay and mobile
Autoplaying video with sound is blocked by modern browsers. Background and hero videos therefore need autoplay muted, and iPhones additionally need playsinline so the video does not jump to full screen. The generator adds these automatically when you switch on autoplay.
Performance tips
Compress videos before uploading, provide a poster so the page looks complete before playback, and use preload="none" for videos far down the page. For short looping animations a muted video is usually much smaller than a GIF. To embed YouTube or Vimeo instead of self-hosted files, use the HTML iFrame Generator; for audio-only content use the Music Code Generator.
Frequently Asked Questions
Why does my video not autoplay?
Browsers only allow autoplay for muted videos, and iOS also requires playsinline. When you enable autoplay the generator adds both attributes automatically.
MP4 or WebM?
MP4 with H.264 video plays everywhere and is the safe default. WebM (VP9 or AV1) is often smaller; list it first and MP4 second so supporting browsers use the smaller file.
How do I add subtitles?
Create a WebVTT (.vtt) file and enter its URL. The generator adds a track element with kind="subtitles", a language code and a label, marked as default. The file must be served from the same origin or with CORS headers.
How do I make the video responsive?
Keep the width attribute for the intrinsic size and add CSS max-width: 100% and height: auto. The video then shrinks on small screens while keeping its aspect ratio.