You already have a camera going into OBS and a stream that works. What's missing is a scoreboard viewers can trust, one that updates the moment the score changes, without anyone typing numbers into a text source. This guide shows you how to add a live scoreboard as a browser source, get the size right, split graphics across two outputs and fix the problems that come up most often.
How a browser source overlay works
A browser source is a small web browser built into OBS. It loads a web page and draws it on top of your video. Scoreboard overlays use a page with a transparent background, so only the graphics show and your camera shows through everywhere else.
The scorekeeper changes the score on a separate device, and the overlay page updates. OBS doesn't need a plugin and nobody touches the OBS computer to change the score. That separation is the point: the producer runs OBS, the scorekeeper runs the scoreboard.
With ScoreCastr, the overlay is a web link for each match. Create a match, pick the sport and teams, and copy the overlay link. Nothing gets installed on the OBS computer. ScoreCastr doesn't stream video itself; OBS still does that part.
Check your OBS canvas first
Before you add anything, check the canvas size. In OBS, open Settings → Video and look at Base (Canvas) Resolution.
- 1920×1080 canvas: the overlay will fit exactly. This is the simplest setup.
- 1280×720 canvas: the overlay still works, but you'll need to scale it down to fit (see below). Many crews keep the canvas at 1920×1080 and set only the Output (Scaled) Resolution to 720p when their upload is weak.
Keep the base canvas at 1920×1080 if you can. Graphics stay sharp and you don't have to resize anything.
Add the browser source
- Select the scene where the scoreboard should appear, usually your Live scene.
- In the Sources panel, click + and choose Browser. Give it a clear name like "Scorebug".
- Paste the overlay link into the URL field. Make sure you copied the whole link.
- Set Width to 1920 and Height to 1080.
- Leave the Custom CSS box as it is. The default CSS keeps the page background transparent.
- Leave Shutdown source when not visible and Refresh browser when scene becomes active unchecked. If either is on, the page reloads each time you change scenes and the graphics can blink or lag for a moment.
- Click OK.
Now drag the browser source above your camera in the Sources list. OBS draws sources from the bottom up, so anything above the camera sits on top of it.
If your canvas is 720p, right-click the browser source and choose Transform → Fit to screen. Don't change the source's Width and Height to 1280×720 instead; the layout is built for 1920×1080 and may crop or shift.
Use the same source in every scene
You'll probably want the scorebug in more than one scene, for example your Live camera and a replay or second-camera scene. Don't create a new browser source each time. In the second scene, click +, choose Browser, then pick Add Existing and select the Scorebug source.
One shared source loads once, uses less CPU and stays in sync across scenes. When you change its settings, every scene gets the change.
A simple scene layout that works for most games:
| Scene | Sources (top to bottom) |
|---|---|
| Pregame | Full-screen graphics source, music, wide shot |
| Live | Scorebug source, announcer mics, camera |
| Break | Full-screen graphics source, sponsor media or still |
| Postgame | Full-screen graphics source, camera |
Two output channels: scorebug and full-screen graphics
ScoreCastr has two output channels, and each one has its own link. You choose whether each graphic goes to Channel 1, Channel 2 or both.
The common setup is the scorebug on Channel 1 and full-screen graphics (halftime scoreboard, lineups, final score) on Channel 2. Add Channel 2 as a second browser source with the same 1920×1080 settings. Then you can:
- Keep the scorebug in your Live scene and put Channel 2 in your Break and Postgame scenes, so full-screen graphics only appear where you want them.
- Put both channels in the Live scene, with Channel 2 above Channel 1, so a lineup can appear over the game while the producer decides when to cut away.
- Hide either source with the eye icon in OBS without touching the scoreboard.
The scorekeeper can show or hide any graphic from the Overlay Visibility panel on the dashboard, and go to break in one tap. The scorebug is on the free plan; the full graphics set starts on the Starter plan. If you're adding live stats to these graphics, see our guide to putting live stats on your stream.
Use the pop-out preview window on the dashboard so the scorekeeper can see what the overlay looks like without walking over to the OBS screen.
Fixing common problems
The source is blank
- Check that the URL pasted completely. A missing character at the end is the usual cause.
- Make sure the OBS computer has internet. The overlay is a web page.
- Check that a graphic is actually turned on. A scorebug that's hidden on the dashboard shows nothing in OBS.
- Open the source properties and click Refresh cache of current page.
- If it's still blank or flickers, try turning Enable Browser Source Hardware Acceleration off (or on) in Settings → Advanced, then restart OBS.
The graphics show old information or an old design
The browser source is holding a cached page. Click Refresh cache of current page in its properties. Also check that you're using this week's match link. Each match has its own overlay link, so last week's link shows last week's game.
The overlay is the wrong size or cut off
- Confirm the source is 1920×1080 in its properties.
- Right-click the source and choose Transform → Reset Transform, then Fit to screen if your canvas isn't 1080p.
- Check you didn't drag the red bounding box by accident during setup.
There's a black or white background over the camera
The Custom CSS was cleared, or someone used Window Capture of a browser instead of a Browser Source. Restore the default CSS, or rebuild it as a proper browser source.
The score updates late
Check the status dot on the dashboard. If it shows Slow or Offline, the problem is the scorekeeper's connection, not OBS. Changes are saved on the device and sent when the connection returns. If you're fighting weak internet at the venue, our guide to streaming with bad internet covers what to do.
Test before game day
Run a full rehearsal at home. Have someone change the score, run the clock and show a full-screen graphic while you do a private or unlisted test stream. Watch the stream on a phone. Check that the scorebug doesn't cover anything important in your camera shot, like the line of scrimmage or the far sideline. For the full YouTube setup, see streaming sports to YouTube with OBS.
If you stream school games, confirm the streaming rights with your athletic director or state association before you go live.
Overlay checklist
- OBS base canvas set to 1920×1080.
- Browser source at 1920×1080 with the default Custom CSS.
- "Shutdown when not visible" and "Refresh when active" unchecked.
- Scorebug source above the camera in the Sources list.
- Same source reused with Add Existing in every scene that needs it.
- Channel 2 added for full-screen graphics, placed in the right scenes.
- This game's match link, not last week's.
- Test stream watched on a phone with the score changing.