A step-by-step guide to adding live, transparent overlays to vMix using a Web Browser input — including transparency, sizing, overlay channels and updating graphics on air.
vMix runs URL-based overlays through its Web Browser input: a web page rendered as a source with transparency, which you then place on an overlay channel above your program. This guide covers adding the input, keeping it transparent, and driving it live. It's the vMix companion to our OBS lower-thirds walkthrough; for the concepts behind both, see broadcast graphics and overlays.
What you need
- vMix (any recent version)
- The URL of your overlay (from Show Runner or another overlay tool)
- The content you want to show (name, sponsor, score, etc.)
Add the overlay as a Web Browser input
- Click Add Input → Web Browser.
- Paste your overlay's URL.
- Set the resolution to match your production — usually 1920 × 1080.
- Click OK. The overlay appears as an input in your input bar.
Keep it transparent
vMix's Web Browser input supports transparency, so a properly built overlay composites cleanly over your program with no background box. If you see a solid background, it's the overlay page that's opaque, not vMix — confirm by loading the URL in a normal browser.
Put it on an overlay channel
Rather than cutting to the overlay as a full input, you layer it over your program using vMix's overlay channels:
- Hover the overlay input and open its overlay settings (the layer/overlay button), or map it to one of the Overlay 1–4 buttons.
- Choose the overlay channel and transition.
- Press the overlay button to bring the graphic on over the live program; press again to take it off.
This keeps your main mix untouched — the graphic simply appears on top and disappears on cue.
Drive it live
The advantage of a URL-based overlay is that it updates without re-importing anything:
- The overlay is a live web page, so its content changes from a control surface while you're live.
- Take the overlay on via the overlay channel, update the content, take it off — vMix keeps rendering the same input.
- You don't rebuild the input mid-show; you drive the content from the overlay tool.
If the input looks frozen, right-click it and reload/refresh the browser input, and verify the URL opens in a normal browser. A blank input usually means the URL is incorrect or is missing a required token.
Quick checklist
- Web Browser input added with the overlay URL
- Resolution set to your production (1920 × 1080)
- Mapped to an overlay channel, not cut as a full input
- Content driven live from the overlay tool
- Tested before going to program
How Show Runner handles it
Show Runner gives each overlay a single transparent URL you drop into a vMix Web Browser input and place on an overlay channel. An operator takes it on, edits the content live, and takes it off — updating on air instantly. Lower thirds, sponsor bugs, up-next, fixtures/results, standings, quizzes and polls all work the same way and are organised into channels for the whole show.
FAQ
How do I make a vMix overlay transparent?
Use the Web Browser input, which supports transparency — a correctly built overlay will show only its graphic over your program. If a solid background appears, the overlay web page itself is opaque; check by opening its URL in a normal browser.
What's the difference between an input and an overlay channel in vMix?
An input is a source (here, the web page); an overlay channel layers that source on top of your program without cutting to it. For graphics you almost always want the overlay channel, so the lower third or sponsor bug appears over the live picture and can be taken on and off on cue.
Can I update the overlay content while live?
Yes. Because it's a live web page, you edit the content from the overlay tool's control surface and it updates on air in real time — no need to rebuild the vMix input.
Why is my vMix Web Browser input blank?
Usually the URL is wrong or missing a required access token. Confirm the overlay URL loads in a normal browser, then paste it back into the input. Also check the input resolution isn't misconfigured.
Using OBS instead? See how to add lower thirds in OBS. Ready to build overlays? Start for free.