# Overlay videos with dynamic artwork, generated with HTML & JS
Transloadit customer HEROFI uses our service to dynamically generate artwork and then 'burn' it into videos, in order to create unique and customized content for their customers.
HEROFI's use case illustrates how powerful our building blocks can be when you add a little bit of creativity. HEROFI was gracious enough to let us showcase a sample of how they're watermarking user uploads for display in [Buffalo Wild Wings](https://www.buffalowildwings.com/) restaurants.
While HEROFI performs a lot more magic in the form of slowdowns and concatenation, this demo will focus exclusively on the HTML-generated watermark case.
It all starts with an S3-hosted[HTML file](https://s3.amazonaws.com/demos.transloadit.com/democode/janice.html?logo%5Furl=https%3A%2F%2Fs3.amazonaws.com%2Ftest.transloadit.com%2Fbww%5Flockup%5Flogo.svg\&store%5Fname=Eat%20at%20Joes\&label=Today%2030%25%20OFF)
```html
```
Step 1
### Handle uploads
We can handle uploads of your users directly. [Learn more ›](/services/handling-uploads.md)
[surf.mp4](https://demos.transloadit.com/4d/65e713b80f4399bb0fe8b6e2aca404/surf.mp4)
Video · 32 MB · 22s · 1280 × 720
```
":original": {
"robot": "/upload/handle"
}
```
🤖 [/upload/handle](/docs/robots/upload-handle.md)
This bot receives uploads that your users throw at you from browser or apps, or that you throw at us programmatically
Step 2
### Transcode, resize, or watermark videos
We offer a variety of video encoding features like optimizing for different devices, merging, injecting ads, changing audio tracks, or adding company logos. [Learn more ›](/services/video-encoding.md)
[surf.webm](https://demos.transloadit.com/6e/756bacf18c4bba92cfb373400db520/surf.webm)
Video · 8.8 MB · 22s · 1280 × 720
```
"video_resized": {
"use": ":original",
"robot": "/video/encode",
"ffmpeg": {
"b": "3200k",
"maxrate": "3200k",
"bufsize": "3200k",
"bt": "4800k"
},
"ffmpeg_stack": "v7",
"height": 720,
"preset": "webm",
"resize_strategy": "fillcrop",
"width": 1280
}
```
🤖 [/video/encode](/docs/robots/video-encode.md)
This bot encodes, resizes, applies watermarks to videos and animated GIFs
Step 3
### Take screenshots of webpages or HTML files
We can process your documents in an automated way, saving you costly resources. [Learn more ›](/services/document-processing.md)
[janice-html.png](https://demos.transloadit.com/55/5b0d53dd16474a8424e685526c1f08/janice-html.png)
Image · 29 KB · 1280 × 720
```
"watermark_screenshot": {
"robot": "/html/convert",
"format": "png",
"height": 720,
"omit_background": true,
"url": "https://s3.amazonaws.com/demos.transloadit.com/democode/janice.html?logo_url=https%3A%2F%2Fs3.amazonaws.com%2Ftest.transloadit.com%2Fbww_lockup_logo.svg&store_name=Eat%20at%20Joes&label=Today%2030%25%20OFF",
"width": 1280
}
```
🤖 [/html/convert](/docs/robots/html-convert.md)
This bot takes screenshots of web pages or uploaded HTML pages
Step 4
### Transcode, resize, or watermark videos
We offer a variety of video encoding features like optimizing for different devices, merging, injecting ads, changing audio tracks, or adding company logos. [Learn more ›](/services/video-encoding.md)
[surf.webm](https://demos.transloadit.com/77/f3189de051449e87cb2db5f28083de/surf.webm)
Video · 8.7 MB · 22s · 1280 × 720
```
"video_watermarked": {
"use": {
"bundle_steps": true,
"steps": [
{
"name": "video_resized",
"as": "video"
},
{
"name": "watermark_screenshot",
"as": "watermark"
}
]
},
"robot": "/video/encode",
"ffmpeg": {
"b": "3200k",
"maxrate": "3200k",
"bufsize": "3200k",
"bt": "4800k"
},
"ffmpeg_stack": "v7",
"height": 720,
"preset": "webm",
"watermark_size": "100%",
"width": 1280
}
```
🤖 [/video/encode](/docs/robots/video-encode.md)
This bot encodes, resizes, applies watermarks to videos and animated GIFs
Step 5
### Export files to Amazon S3
We export to the storage platform of your choice. [Learn more ›](/services/file-exporting.md)
`:original`
* [https://demos.transloadit.com/4d/65e713b80f4399bb0fe8b6e2aca404/surf.mp4](https://demos.transloadit.com/4d/65e713b80f4399bb0fe8b6e2aca404/surf.mp4)
`video_resized`
* [https://demos.transloadit.com/6e/756bacf18c4bba92cfb373400db520/surf.webm](https://demos.transloadit.com/6e/756bacf18c4bba92cfb373400db520/surf.webm)
`watermark_screenshot`
* [https://demos.transloadit.com/55/5b0d53dd16474a8424e685526c1f08/janice-html.png](https://demos.transloadit.com/55/5b0d53dd16474a8424e685526c1f08/janice-html.png)
`video_watermarked`
* [https://demos.transloadit.com/77/f3189de051449e87cb2db5f28083de/surf.webm](https://demos.transloadit.com/77/f3189de051449e87cb2db5f28083de/surf.webm)
```
"exported": {
"use": [
":original",
"watermark_screenshot",
"video_resized",
"video_watermarked"
],
"robot": "/s3/store",
"credentials": "demo_s3_credentials",
"url_prefix": "https://demos.transloadit.com/"
}
```
🤖 [/s3/store](/docs/robots/s3-store.md)
This bot exports encoding results to Amazon S3
## Live Demo. See for yourself
Loading Uppy demo…
This live demo is powered by [Uppy](https://uppy.io/docs/guides/uppy-transloadit/), our open source file uploader that you can also use without Transloadit, and [tus](https://tus.io), our open protocol for resumable file uploads that is making uploading more reliable across the world.
## Build this in your own language
```
```
[Read docs: Browsers](/docs/sdks/uppy.md)
## So many ways to integrate
Transloadit is a service for companies with developers. And there are many ways developers can put Transloadit to good use inside your company to automate media processing.
#### Bulk imports
Add one of our [import Robots](/services/file-importing.md) to acquire and transcode massive media libraries.
#### Handling uploads
We are *the* experts at reliably [handling uploads](/services/handling-uploads.md). We wrote the [protocol](https://tus.io/) for it.
#### Front-end integration
We integrate with web browsers via our next-gen file uploader [Uppy](https://uppy.io/docs/guides/uppy-transloadit/) and SDKs for Android and iOS.
#### Back-end integration
Send us batch jobs in any server language using one of our [SDKs](/docs/sdks.md) or directly interfacing with our [REST API](/docs/api.md).
#### Pingbacks
Configure a [notify\_url](/services/content-delivery.md) to let your server receive transcoding results JSON in the `transloadit` POST field.
#### On-demand
Use our [Smart CDN](/services/file-importing.md) to adapt files on-demand and stream them directly to your users.
[Browsers](/docs/sdks/uppy.md)[TransloaditKit](/docs/sdks/transloaditkit.md)[Ruby SDK](/docs/sdks/ruby-sdk.md)[HTTP REST API](/docs/api.md)[Python SDK](/docs/sdks/python-sdk.md)[PHP SDK](/docs/sdks/php-sdk.md)[Node.js SDK](/docs/sdks/node-sdk.md)[Java SDK](/docs/sdks/java-sdk.md)[Go SDK](/docs/sdks/go-sdk.md)[cURL](/docs/sdks/curl.md)[Convex](/docs/sdks/convex.md)
[Browsers](/docs/sdks/uppy.md)[TransloaditKit](/docs/sdks/transloaditkit.md)[Ruby SDK](/docs/sdks/ruby-sdk.md)[HTTP REST API](/docs/api.md)[Python SDK](/docs/sdks/python-sdk.md)[PHP SDK](/docs/sdks/php-sdk.md)[Node.js SDK](/docs/sdks/node-sdk.md)[Java SDK](/docs/sdks/java-sdk.md)[Go SDK](/docs/sdks/go-sdk.md)[cURL](/docs/sdks/curl.md)[Convex](/docs/sdks/convex.md)
[Browsers](/docs/sdks/uppy.md)[TransloaditKit](/docs/sdks/transloaditkit.md)[Ruby SDK](/docs/sdks/ruby-sdk.md)[HTTP REST API](/docs/api.md)[Python SDK](/docs/sdks/python-sdk.md)[PHP SDK](/docs/sdks/php-sdk.md)[Node.js SDK](/docs/sdks/node-sdk.md)[Java SDK](/docs/sdks/java-sdk.md)[Go SDK](/docs/sdks/go-sdk.md)[cURL](/docs/sdks/curl.md)[Convex](/docs/sdks/convex.md)
## Other cool demos
* [View demo→Document ProcessingAdd a header or footer to a PDF](/demos/document-processing/add-header-or-footer-to-pdf.md)
* [View demo→Document ProcessingConvert all pages of a document into an animated GIF](/demos/document-processing/convert-all-pages-of-a-document-into-an-animated-gif.md)
* [View demo→Image ProcessingAdd a sepia effect to an image](/demos/image-processing/add-sepia-effect-to-an-image.md)
Try Transloadit
## Ready to get started?
Join thousands of developers who trust Transloadit for their file processing needs.
Building file processing from scratch
Ready-to-use API & SDKs
Scaling infrastructure headaches
Auto-scaling global infrastructure
Managing codec updates
Always up-to-date processing
Handling file security
Enterprise-grade security
Supporting all file formats
1000+ formats & codecs supported
Fragmented media tooling
One API for file workflows
GDPR
GDPR
HIPAA
HIPAA
ISO 27001ISO27001
ISO 27001
AES-256
AES-256
SOC 2 Type II
SOC 2 Type II
[Try Transloadit for Free](/c/signup/)
[Try Transloadit for Free](/c/signup/)
No credit card needed · Cancel anytime