---
title: Adding HTML Overlays - ZEN Master
slug: zen-master/adding-html-overlays-zen-master
docTags:
createdAt: 2026-05-22T19:54:07.392Z
---
## Overview
HTML overlays, which might be static images or dynamic widgets showing such things as news headlines, stock prices, sports scores, or local weather, can be added as overlays on streaming videos during transcoding.
Zixi uses the **Chromium Embedded Framework (CEF) **to embed the HTML overlay into each frame of the video.
Note that this process is separate from the processing of the video frames, and depending on the CPU load, might run more slowly. That means that while a snapshot from the HTML overlay will be added to every frame, some images may repeat. For a static overlay this makes no difference, but for a dynamic overlay, there might be small discrepancies between what is seen in the video stream and what is seen in overlay viewed separately.
## Requirements
- The Broadcaster must have a license key that enables transcoding as well as a [transcoder (software, GPU, or VPU) installed](docId\:lgQ7l9Suyqop2EtaBv1uL).
- The [HTML Overlay Plugin](docId:1svyta7P777nBTqPN8yt8) must also be installed.
## Adding the Overlay to a Transcoded Source
In ZEN Master, HTML Overlays can only be added to [Transcoded Source](docId\:lNauA-wKTttUl4xktBido). The process is very simple:
1. Put the HTML Overlay on public URL.
2. Add the URL to the **HTML Overlay URL** field, which appears in the **Advanced** section of the screen for creating a Transcoded Source:
Note that there is an option to use the audio track from the HTML Overlay for the video audio track, which requires entering the audio PID number.
## Creating HTML Overlays
HTML overlays can be created as static content that sits on top of other content, such as a logo or an ad banner. They can also be dynamic, pulling content such as current weather conditions or news headlines in from another source via JavaScript.
:::hint{type="info"}
Before looking at the details of creating overlays, it's worth pointing out that there are several platforms there are several platforms available that will help you do so easily. The one we find best for video overlays is [Singular.live](https://singular.live).
:::
### Creating Static HTML Overlays
Creating a static overlay is straightforward.
::::WorkflowBlock
:::WorkflowBlockItem
Add a basic overlay element to your HTML:
```html
Place whatever content you want here.
```
:::
:::WorkflowBlockItem
Style it with CSS so it covers the whole viewport and sits on top of the page:
:::
::::
You can drop that into a bare HTML file and see it work, then adapt the CSS (color, opacity, z‑index) and what you place inside `#overlay` for your use case (logo, tutorial, modal, etc.).
### Creating Dynamic HTML Overlays
You can treat the overlay as a floating “info panel” that your JavaScript keeps updating with live data (weather, headlines, or both).
**Basic Idea**
You create a fixed-position overlay element, style it so it sits on top of the page (but not full‑screen, unless you want that), and use`fetch` on an interval to pull in JSON from whatever API you like. Then you render that data into the overlay.
**Example: dynamic overlay with weather + headlines **
```html
Dynamic Overlay: Weather & News