Add animated overlays to your videos by rendering dynamic HTML into your output for animated branding, subtitles, tickers, lower-thirds, and more.
HTML Overlays let you burn HTML and CSS directly onto your video during transcoding, so that it’s easy to permanently add dynamic graphics to your video.
Publish a public HTML and CSS page with your graphic — a lower-third, ticker, animated logo, subtitle card, or any other dynamic overlay.
Include a logo entry in your transcoding request and set source to the HTML page URL instead of a static image.
Control overlay size with width and height, place it with x/y or position.align, and optionally set start_time, duration, and opacity.
Qencode renders the HTML as a transparent overlay, including CSS animation, and composites it onto the transcoded video so the graphic stays in the file.
Add logos, sponsorships, and attribution on to your video file.
Create animated lower-thirds, tickers, captions, logos, and more with HTML and CSS.
Reuse templates to create custom graphics across videos, customers, and campaigns.
Lock timestamps, source attribution, and regulatory content into the video itself so it can't be stripped from downstream copies.
Content distributed through OTT partners and downloads loses its original branding through partner overlays or re-processing.
Make logos, attribution data, and channel branding embedded directly in the video so they are always visible wherever the content is played.
A team is spending a lot of time doing repetitive work to add lower-thirds, sponsor graphics, and motion elements to highlights and social cuts.
Automate the process to render animated HTML and CSS graphics during transcoding to ship broadcast-ready content faster.
Licensing notices, instructor credits, and disclosures need to persist with the video as it moves between LMS platforms or gets downloaded.
Automatically embed required information directly into the video for faster distribution to platforms, redistribution, and offline playback.
| API Method | POST /v1/start_encode2. Add a logo entry to your format with the source param set to the URL of your HTML page. Also available in the Portal: enable Watermark and switch the toggle from Image to HTML. |
| Key Parameters | source, width, height, x, y, position (align, margin_x, margin_y), opacity, start_time, duration |
| Supported Input Formats | Overlay source must be a URL to an HTML page. Any video format — MP4, MOV, MKV, AVI, HLS, and 200+ others. |
| Supported Output Formats | The logo entry is added to a format output such as mp4. For HLS or MPEG-DASH, configure logo on each stream. |
| Limits & Constraints | x/y and position are mutually exclusive. width and height default to the output video size if omitted. opacity ranges from 0.0 to 1.0. start_time defaults to 0 and duration defaults to the end of the video. margin_x and margin_y apply only when anchored to an edge and are ignored when centered. |
Burns an animated HTML overlay into an MP4 during transcoding.
{
"query": {
"source": "https://your-storage.com/source.mov",
"encoder_version": 2,
"format": [
{
"output": "mp4",
"video_codec": "libx264",
"logo": [
{
"source": "https://nyc3.s3.qencode.com/qencode/overlay.html",
"x": 20,
"y": 20,
"width": 320,
"height": 200,
"start_time": 1,
"duration": 3
}
]
}
]
}
}Copy this payload and use it with your API key to test HTML Overlays on your own video.
View HTML Overlay TutorialIncluded with Transcoding
HTML Overlays are available for all Qencode users. Render animated HTML and CSS onto your transcoded video outputs as part of your standard transcoding workflow.
We love creating powerful solutions that are aligned with the needs of your business.
Please send us a message if you have a question or Schedule a call for a demo to discuss your integration.
Contact us with any questions. We'd love to help.
Los Angeles, CA - (HQ)
San Francisco, CA
New York, NY