gd streamergd streamerdocs
Get Started

OBS Setup

How to add gd streamer overlays to OBS Studio as Browser Sources with recommended sizes and settings.

Last updated: 2026-03-23

Adding overlays to OBS Studio#

gd streamer overlays run in a browser and connect to your match data in real-time. OBS Studio loads them as Browser Sources -- no plugins or downloads needed.

Copy the overlay URL

In gd streamer, open your match and go to the Overlays tab. Click the copy icon next to the overlay you want to add.

Add a Browser Source in OBS

In OBS Studio:

  • Go to the Sources panel
  • Click the + button
  • Select Browser
  • Give it a name (e.g., "Scoreboard" or "Player 1 Name")
  • Click OK

Configure the Browser Source

In the Browser Source properties:

  • Paste your overlay URL into the URL field
  • Set the Width and Height (see recommended sizes below)
  • Check Shutdown source when not visible
  • Check Refresh browser when scene becomes active
  • Click OK

Position the overlay

Drag and resize the overlay in your OBS preview to place it where you want on screen. Use OBS alignment tools (right-click > Transform) for precise positioning.

Repeat for each overlay

Add a new Browser Source for every overlay you want on stream. Each overlay has its own URL.

OBS browser source properties — paste the overlay URL and set 1920x1080

All overlays are built on a 1920x1080 canvas. Set every Browser Source to:

  • Width: 1920
  • Height: 1080

This matches a standard 1080p stream layout. Each overlay positions itself within that canvas, so using the full resolution ensures everything renders at the correct position and stays sharp.

Cropping overlays for easier positioning#

Since every overlay is a full 1920x1080 source, it can be tricky to select and move individual overlays in OBS when they all cover the entire canvas. You can use the crop filter to trim the source down to just the visible area of the overlay, making it much easier to drag around.

Right-click the Browser Source

In the Sources panel, right-click the overlay you want to crop.

Open Filters

Select Filters from the context menu.

Add a Crop/Pad filter

Under Effect Filters, click the + button and select Crop/Pad.

Set the crop values

Adjust the Left, Top, Right, and Bottom values to trim away the empty space around the overlay element. Preview the result in the OBS canvas as you adjust.

The Crop/Pad filter trims the source down to just the visible overlay area

The cropped source now only covers the visible part of the overlay, so you can freely drag and stack it without accidentally selecting other full-canvas sources underneath.

Tip
Hold Alt and drag the edges of a source in the OBS preview as a quick shortcut to crop without opening the Filters dialog.

Important settings#

Transparent backgrounds#

All gd streamer overlays have transparent backgrounds by default. They layer directly on top of your stream content -- no green screen or chroma key needed. Make sure you don't set a custom CSS background in the Browser Source properties.

Real-time updates#

Overlays connect to your match data through a real-time subscription. When scores change (from the dashboard or player input), every overlay updates instantly. You never need to manually refresh a Browser Source during a stream.

Tip
If an overlay ever stops updating, right-click the Browser Source in OBS and select Refresh to reconnect.

Custom CSS (optional)#

The Browser Source properties include a Custom CSS field. Leave this empty unless you have a specific reason to override styles. The default CSS field in OBS includes a background color -- clear it out if your overlay appears with a white or black background.

The default OBS custom CSS typically looks like this:

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

This is fine to keep. If you see a solid background behind your overlay, make sure no additional background styles have been added.

Troubleshooting#

Overlay shows a blank screen#

  • Verify the URL is correct and includes the full match path
  • Check that your match exists and hasn't been deleted
  • Try opening the overlay URL directly in your browser to confirm it loads

Overlay has a solid background#

  • Clear or reset the Custom CSS field in the Browser Source properties
  • Make sure the OBS Browser Source isn't set to a custom background color

Overlay is not updating#

  • Right-click the Browser Source and select Refresh
  • Check your internet connection
  • Verify that Shutdown source when not visible is enabled -- this forces a fresh connection when switching scenes

Overlay looks blurry#

  • Make sure the Browser Source dimensions are set to 1920x1080
  • Avoid scaling the source down or up in OBS -- keep it at native resolution
Warning
If you resize overlays in OBS by dragging, the Browser Source still renders at its original resolution and scales the image. For the sharpest result, keep the Browser Source at 1920x1080 and don't rescale it.

What's next?#

Your overlays are live in OBS. From here you can explore:

  • Player Input -- let players enter scores directly from a tablet
  • Timer -- set up countdown or target-time timers
  • Overlays -- browse the full overlay library and customization options