OneTaskBy Tim King · Updated
Video to Data URI
Base64-Encode a Clip for HTML or CSS
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 to Data URI works
This video to data URI converter turns a short clip into one long base64 string that starts with
data:video/.... Paste it straight into a src attribute and the video plays with no separate
file. Copy the URI or a complete video tag, or download it as a text file. Encoding runs in your
browser.
A data URI packs a file into a URL. Instead of pointing at clip.mp4 on a server, the src
contains the file itself, encoded as base64 text. The browser decodes it and plays it as if it had
been downloaded.
When a video data URI makes sense
- Single-file demos and prototypes: one HTML file that you can email or drop into a ticket, with the video inside it.
- Tests and fixtures: a unit or end-to-end test that needs a real video without a network request or a fixture file.
- Sandboxes that block external media: some CodePen-style editors, notebooks and internal tools allow inline content but not uploaded files.
- Tiny UI loops: a one-second animated icon or loader, where a separate request costs more time than the bytes.
For anything larger, a normal file is better in every way. It caches, streams, loads lazily and does not bloat the page that contains it.
How video to data URI encoding works
Base64 maps every 3 bytes to 4 text characters. The output is therefore about 133% of the original
size, plus a short header such as data:video/webm;base64,.
| Video file | Data URI | Verdict |
|---|---|---|
| 100 KB | 133 KB | Fine for a loop or icon |
| 500 KB | 667 KB | Acceptable in a demo page |
| 2 MB | 2.7 MB | Warned: the page grows by that much |
| 10 MB | 13.3 MB | Editors and browsers start to struggle |
| 50 MB | refused | Too large to inline sensibly |
The tool reads your file with the browser's FileReader, previews the result in a player and shows the first 20,000 characters in the text box. The copy and download buttons always use the full string.
Copy data URI or Copy video tag
Copy data URI puts just the data:video/... string on the clipboard, for a src attribute, a
JavaScript variable or a JSON fixture.
Copy video tag wraps it as <video src="..." autoplay muted loop playsinline></video>. Those
four attributes are what browsers require for a silent background loop that starts by itself,
including on iPhones.
Tips and pitfalls
Shrink before you encode. Trim the clip, mute it and lower the resolution first. Every kilobyte saved is 1.33 kilobytes off the page.
No caching. A data URI is downloaded again with every page that contains it. A 1 MB clip used on ten pages costs ten times as much as one shared file.
Email clients block video. Gmail, Outlook and most webmail strip video tags, data URI or not.
For email, convert the clip to a GIF instead.
Check the MIME type. The URI uses the type your browser reports for the file. If it shows
video/mp4 for a file without a known type, the browser was guessing; play the preview to confirm.
How to read the result
The stats show the MIME type, the original file size and the data URI size, with its percentage of the original. If the clip is over 2 MB, the status line warns you before you paste it anywhere.
FAQ
Why is the data URI bigger than the video file?
Base64 encodes every 3 bytes of the file as 4 text characters, so the result is about one third larger. That overhead is the cost of storing binary data as plain text that can sit inside HTML, CSS or JSON.
How big a video can I turn into a data URI?
The tool accepts files up to 50 MB and warns above 2 MB. In practice, keep inline videos under about 500 KB. Larger strings slow down editors, delay page rendering and are downloaded again on every page that uses them.
Will the video autoplay from a data URI?
Yes, if it is muted. Use Copy video tag, which adds the autoplay, muted, loop and playsinline attributes. Browsers block autoplay with sound whatever the source, so a clip with audio must wait for the viewer to press play.
Is my video uploaded to be encoded?
No. The file is read and encoded by your browser's FileReader and stays on your device. The copied text goes only to your clipboard, so private clips are never sent to a server at any point.
See also: all Audio & Video tools, Units, Images, Documents, Data & Code.
Related tools
Image To Data URI
Base64-encode an image as a data URI for CSS or HTML.
Data URI Decoder
Decode a data URI and check what its payload really contains.
Audio To Base64
Turn a short audio clip into a base64 data URI.
Video To GIF
Convert a short section of a video into an animated GIF.
Video Trimmer
Cut a video down to the part between two timestamps.