Show Runner

Graphics & overlays

How to add lower thirds in OBS (browser source, step by step)

· 4 min read

A step-by-step guide to adding live, transparent lower thirds to OBS Studio using a browser source — including sizing, transparency, positioning and updating them on air.

A lower third — the strip that names the person on screen — is the single most useful graphic in any interview, panel or live show. In OBS Studio you add one as a browser source: a web page rendered as a transparent layer over your video. This guide walks through it end to end, then covers keeping the lower third live-updating rather than static.

New to overlays generally? Read broadcast graphics and overlays: a producer's guide first.

What you need

  • OBS Studio (any recent version)
  • The URL of your lower-third overlay (from Show Runner or another overlay tool)
  • The name/title content you want to show

Add the lower third as a browser source

  1. In the Sources panel, click + and choose Browser.
  2. Name it something clear like Lower third, then click OK.
  3. In URL, paste your overlay's URL.
  4. Set Width and Height to match your canvas — usually 1920 × 1080 for a standard stream. Sizing the source to the full canvas lets the overlay position itself correctly within the frame.
  5. Leave "Shutdown source when not visible" unticked if you want it to keep running, and tick "Refresh browser when scene becomes active" if you want it to reload on scene changes.
  6. Click OK. The lower third appears as a layer in your scene.

Because OBS browser sources are transparent by default, only the graphic shows — there's no background box over your video.

Browser source — Properties
https://show-runner.co.uk/o/…
1920
1080
✓ Refresh browser when scene becomes active
OBS Browser source properties: paste the overlay URL, size it to your canvas

Position it correctly

If the overlay is built at full 1920 × 1080, it already places itself in the right spot (typically bottom-left) — just leave the source at position 0,0 covering the whole canvas. If you're using a smaller graphic, drag it into place and use OBS's edit handles, holding Alt to crop if needed. Keep it within the title-safe area — a little in from the edges — so it isn't clipped on some displays.

Make it live-updating (not static)

A static image lower third means re-exporting every time a name changes. The point of a browser-source overlay is that it's live:

  • The overlay is a web page, so its content can be changed from a control surface while you're on air.
  • Take the lower third on, update the name/title, and take it off — OBS keeps rendering the same URL while the content changes.
  • You never touch the OBS source mid-show; you drive the graphic from the overlay tool.

If your lower third looks frozen or won't update, right-click the source → Interact or Refresh, and confirm the URL loads in a normal browser. A blank source almost always means the URL is wrong or requires a token that's missing.

Quick checklist

  • Browser source added, URL pasted
  • Width/height set to your canvas (1920 × 1080)
  • Source positioned within the title-safe area
  • Content driven live from the overlay tool, not baked into an image
  • Tested on a preview scene before going live

How Show Runner handles it

With Show Runner you design a lower third in the browser, then drop its single transparent URL into an OBS browser source. An operator takes it on, edits the name and title live, and takes it off — updating on the stream instantly. The same approach covers sponsor bugs, up-next, scoreboards and more, all organised into channels.

FAQ

Why is my OBS browser source blank?

Almost always the URL is wrong, or the overlay needs an access token that isn't included in the URL. Paste the exact overlay URL into a normal web browser to confirm it loads, then copy it back into OBS. Also check the source's width/height aren't set to zero.

How do I make the lower third transparent in OBS?

You don't need to do anything — OBS browser sources have a transparent background by default, so a properly built overlay shows only its graphic over the video. If you see a solid box, the overlay page itself has an opaque background.

Can I change the name on the lower third while live?

Yes. Because the overlay is a live web page, you edit its content from the overlay tool's control surface and it updates on air in real time — no need to touch OBS or re-add the source.

What size should the browser source be?

Match your streaming canvas, usually 1920 × 1080. Building the overlay at full canvas size lets it position itself correctly, so you can leave the OBS source at 0,0 covering the whole frame.


Using vMix instead? See how to add overlays in vMix. Ready to build your first lower third? Start for free.

← All guides