Skip to main content

Help Center

OBS Setup

intermediateLast updated: 1/15/2024

Set up OBS Studio with broadcast overlays for tournament streaming

OBS Setup

Set up OBS Studio to display broadcast overlays for your tournament streams.

Prerequisites

Required Software

  • OBS Studio: Latest version (free download)
  • Browser: Modern browser (Chrome, Firefox, Edge)
  • Internet Connection: Stable connection for overlay updates

Required Access

  • Tournament Access: Admin, staff, or host access to tournament
  • Broadcast Control: Access to broadcast control board

Getting Your Overlay URL

Step 1: Access Broadcast Control

  1. Navigate to tournament
  2. Go to "Broadcast" tab
  3. Find "Broadcast Overlay URL" section

Step 2: Copy URL

  1. Overlay URL is displayed in text field
  2. Click "Copy" button
  3. URL copied to clipboard

URL Format:

https://yourdomain.com/[host-slug]/overlays/broadcast/[tournament-slug]

Step 3: Preview (Optional)

  1. Click "Preview" button
  2. Opens overlay in new tab
  3. Verify overlay displays correctly
  4. Close preview when done

Adding Overlay to OBS

Step 1: Create Browser Source

  1. Open OBS Studio
  2. In Sources panel, click "+" button
  3. Select "Browser Source"
  4. Name it (e.g., "Tournament Overlay")
  5. Click "OK"

Step 2: Configure Browser Source

Basic Settings:

  • URL: Paste overlay URL you copied
  • Width: 1920 (or your stream width)
  • Height: 1080 (or your stream height)
  • Custom CSS: Leave empty (unless customizing)

Advanced Settings:

  • Shutdown source when not visible: Unchecked
  • Refresh browser when scene becomes active: Checked
  • Control audio via OBS: Unchecked (unless needed)

Step 3: Position Overlay

  1. Overlay appears in preview
  2. Drag to position
  3. Resize if needed
  4. Adjust to fit your layout

Overlay Configuration

Recommended Settings

For Full Overlay:

  • Width: 1920
  • Height: 1080
  • Position: Full screen or as needed

For Partial Overlay:

  • Width: Custom (e.g., 1280)
  • Height: Custom (e.g., 720)
  • Position: Corner or side

Browser Source Properties

Key Settings:

  • URL: Your overlay URL
  • Width/Height: Match your stream resolution
  • FPS: 60 (for smooth updates)
  • Shutdown source: Unchecked (keep active)

Testing Overlay

Step 1: Preview in OBS

  1. Click "Preview" in OBS
  2. Verify overlay displays
  3. Check overlay updates
  4. Test control board features

Step 2: Test Controls

  1. Use control board to highlight players
  2. Switch games
  3. Add custom messages
  4. Verify changes appear in OBS

Step 3: Test Stream Output

  1. Start recording (not live stream)
  2. Record short test
  3. Review recording
  4. Verify overlay looks good

Troubleshooting

"Overlay not displaying"

Problem: Overlay doesn't appear in OBS

Solutions:

  • Verify URL is correct
  • Check internet connection
  • Refresh browser source
  • Verify overlay URL is accessible
  • Check OBS console for errors

"Overlay not updating"

Problem: Overlay doesn't update when controls change

Solutions:

  • Check "Refresh browser when scene becomes active"
  • Manually refresh browser source
  • Verify real-time connection
  • Check control board is working
  • Restart OBS if needed

"Overlay too large/small"

Problem: Overlay size is incorrect

Solutions:

  • Adjust width/height in browser source
  • Use transform controls in OBS
  • Match overlay size to stream resolution
  • Test different sizes

"Overlay position wrong"

Problem: Overlay in wrong position

Solutions:

  • Drag overlay in OBS preview
  • Use transform controls
  • Adjust position manually
  • Lock overlay when positioned

Best Practices

Setup

  • Test First: Always test before going live
  • Stable Connection: Ensure stable internet
  • Backup Plan: Have backup overlay ready
  • Document Settings: Save OBS scene

During Stream

  • Monitor Overlay: Watch overlay during stream
  • Use Controls: Actively use control board
  • Keep Active: Don't close control board
  • Test Updates: Test updates before important moments

Maintenance

  • Update OBS: Keep OBS Studio updated
  • Check URL: Verify URL still works
  • Test Regularly: Test overlay regularly
  • Backup Scenes: Save OBS scenes

Advanced Configuration

Multiple Overlays

Using Multiple Overlays:

  1. Create separate browser sources
  2. Use different overlay URLs
  3. Position overlays separately
  4. Control independently

Custom Styling

Custom CSS (Advanced):

  • Add custom CSS in browser source
  • Override default styles
  • Match your branding
  • Test thoroughly

Scene Management

Organizing Scenes:

  • Create dedicated scene for overlay
  • Use scene transitions
  • Switch scenes as needed
  • Keep overlay consistent

Related Articles

Tags:broadcast-overlaysobsstreamingsetup

Was this article helpful?