Browser sources power almost every stream overlay. Three settings decide whether yours behaves.

Short answer

Add a browser source in OBS via Sources → + → Browser, paste your overlay URL, set Width and Height to match the overlay's designed size, and leave "Shutdown source when not visible" and "Refresh browser when scene becomes active" unticked so the overlay keeps its state.

Adding a browser source

A browser source renders a web page inside your scene. It is how overlays, alerts and interactive games appear on stream.

  1. In OBS, click + under Sources and choose Browser
  2. Name it after the overlay so you can find it later
  3. Paste the overlay URL into the URL field
  4. Set Width and Height to the overlay's designed resolution
  5. Set FPS to 60 if your machine is comfortable, otherwise 30
  6. Click OK and position the source in your scene

The two settings that break overlays

Most overlay problems come from two checkboxes that sound helpful and are not.

  • "Shutdown source when not visible" — kills the overlay whenever you switch scenes, losing scores and connections
  • "Refresh browser when scene becomes active" — restarts the overlay every scene change, resetting everything

If your overlay keeps resetting its scores or disconnecting from chat when you change scenes, one of those two boxes is ticked.

Getting the size right

Set the browser source dimensions to the overlay's native size, then scale the source in the scene if needed. Setting a small width and stretching it produces blurry text; setting an enormous width wastes GPU.

For a portrait overlay on a landscape canvas, keep the source at its portrait dimensions and place it to one side rather than distorting it.

Custom CSS and transparency

OBS injects a default stylesheet that makes the page background transparent. Overlays designed for OBS rely on this, which is why a page can look different in your browser than on stream.

Leave the default Custom CSS in place unless an overlay specifically tells you otherwise.

Troubleshooting a blank browser source

A blank source almost always means the page failed to load or errored before rendering.

  1. Right-click the source and choose Interact — you will see the page as OBS sees it
  2. Open the same URL in a normal browser to check it loads at all
  3. Confirm the URL has not expired or been revoked
  4. Right-click the source and choose Refresh
  5. Check your machine is not blocking the domain via VPN or firewall

Performance tips

Browser sources are small browsers. Several running at once will use real resources.

  • Use 30 FPS for static overlays, 60 only for animated ones
  • Do not duplicate a source across scenes — use a shared source instead
  • Close the Interact window when you are done with it