OneTaskBy Tim King · Updated
HTML5 Video Tag
HTML5 Video Tag With WebM, MP4 and Captions
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Video for Web Snippet works
This video for web snippet tool writes the HTML5 video tag for a clip you host yourself. Enter the file path, choose a player with controls or a silent background loop, and copy markup with WebM and MP4 sources, a poster frame, captions and the attributes browsers need to play it properly.
The video element looks simple, but small omissions cause real problems. Leave out playsinline
and iPhones open the clip full screen. Leave out muted and autoplay is silently blocked. Leave out
width and height and the page jumps as the video loads. This tool includes all of them.
What goes in the HTML5 video tag
| Part | Why it is there |
|---|---|
source WebM then MP4 |
Browsers take the first type they can play; WebM is usually smaller |
poster |
Shown before playback, so there is no black box while loading |
width and height |
Reserve the right space, preventing layout shift |
style="width:100%;height:auto" |
Scales the player to its column at the true shape |
playsinline |
Lets iPhones play in the page instead of full screen |
preload |
metadata for players, auto for background loops |
track |
Captions from a WebVTT file, on by default |
| Download link | Fallback text for the rare browser with no video support |
Paths are built from the name you enter, so /media/intro.mp4 gives /media/intro.webm,
/media/intro.jpg and /media/intro.vtt. Upload files with those names, or type a different
poster path.
Player or background loop
A player gets controls, loads only the metadata until someone presses play and can carry a
captions track. A background loop gets autoplay muted loop playsinline, the four attributes
every browser requires before it will start a video on its own, and loads in full straight away.
It has no controls or captions, so keep it decorative and free of speech.
Tips and pitfalls
Encode both formats. MP4 with H.264 plays everywhere. A VP9 or AV1 WebM copy is often 30–50% smaller, so browsers that support it download less. If you only have MP4, set WebM to No rather than linking a file that does not exist.
Keep background loops small. Aim for under 2 MB and under 15 seconds, with no audio track at all. A loop autoplays on every visit, including on mobile data.
Captions need WebVTT. The track element only accepts .vtt files. Convert an .srt first, or
browsers will ignore the track without any error.
Respect reduced motion. For decorative loops, consider pausing the video with a script when
prefers-reduced-motion is set.
How to read the result
The output is complete markup to paste into your page. Width and height should be the video's real pixel size; the inline style then makes it responsive.
FAQ
Why won't my HTML video autoplay?
Browsers only autoplay videos that are muted, and iPhones also need playsinline. Choose Background
loop, which adds autoplay, muted, loop and playsinline together. A video with sound must wait for
the viewer to press play.
Should I use WebM or MP4?
Both. List WebM first and MP4 second. Browsers that support WebM use the usually smaller file, and every other browser falls back to MP4, which plays almost everywhere. That gives the best size without leaving anyone out.
How do I add subtitles to an HTML5 video?
Add a track element pointing to a WebVTT (.vtt) file, with kind="captions", a language code and
a label. Set Captions track to Yes here and the tool writes it for you, switched on by default.
Why set width and height if the video is responsive?
The browser uses them to work out the shape before the file loads, so it can reserve the right space. Without them the page jumps when the video appears, which hurts your Cumulative Layout Shift score.
See also: all Video & Screen tools, Images, Audio, PDF, SVG, Simulations & Screensavers, Generative Art, Chart Makers, 3D Model Viewers, Drawing Pads, Mockups & 3D Making, Diagram Makers, 3D Science, Tracker Music.
Related tools
Video Embed Code Generator
Get responsive embed code for YouTube, Vimeo or a video file.
Video To Data URI
Turn a short clip into a base64 data URI or an inline video tag.
SRT / VTT Converter
Convert SRT subtitles to WebVTT and back, with an optional time shift.
Video File Size Estimator
Work out a video's file size from bitrate and length.
Responsive Iframe Generator
Responsive iframe embed code for YouTube, Vimeo, maps and more.