How to Set Up an OBS Browser Source for Stream Overlays

Browser sources are the backbone of modern stream overlays. Whether you're adding alerts, chat widgets, or real-time subtitles, the process starts with adding a browser source to OBS. Here's a complete walkthrough.

What You Need

• OBS Studio installed (version 28+ recommended)
• A URL for your overlay — this could be from StreamElements, Streamlabs, StreamTranslate, or any web-based overlay service
• Your streaming scene set up with your game/camera sources already in place

Step-by-Step Setup

Step 1: Open OBS Studio and select the scene where you want the overlay.

Step 2: In the Sources panel at the bottom, click the + button.

Step 3: Select "Browser" from the list of source types.

Step 4: Name your source something descriptive — "Subtitle Overlay" or "Alert Widget" — so you can identify it later.

Step 5: In the properties window, paste your URL into the URL field.

Step 6: Set the width and height. For full-screen overlays, use your canvas resolution (typically 1920 x 1080). For smaller widgets, adjust accordingly.

Step 7: Check "Shutdown source when not visible" — this saves CPU when the source isn't active in your current scene.

Step 8: Click OK, then position and resize the source in your scene preview.

Common Settings Explained

• Width/Height — The resolution of the embedded browser. Match your canvas for full-screen overlays.
• FPS — Default 30 is fine for text-based overlays like subtitles. Use 60 for animated overlays.
• CSS — Custom CSS field lets you override styles on the loaded page. Useful for tweaking colors or hiding elements.
• Shutdown source when not visible — Stops the browser when you switch to a scene that doesn't include this source.
• Refresh browser when scene becomes active — Reloads the page when you switch to the scene. Useful if the overlay needs a fresh start each time.

Positioning Tips for Subtitle Overlays

For subtitle overlays specifically, position the source at the bottom of your screen. Leave a small margin from the absolute bottom edge so text doesn't get cut off on some displays. Make sure the subtitle overlay is above your game capture in the source list (higher in the list = rendered on top).

Troubleshooting Common Issues

• Black or blank source: Check that the URL is correct and accessible in a regular browser first
• Audio from browser source: Some overlay URLs play audio. Uncheck "Control audio via OBS" or mute the source in the audio mixer
• Source not updating: Right-click the source and select "Refresh" to reload the page
• Performance issues: Reduce the number of active browser sources, or lower FPS on non-critical sources

Using Browser Sources for StreamTranslate

StreamTranslate provides a single URL that you paste into a browser source. The subtitle appears automatically as you speak. No additional configuration is needed beyond the standard browser source setup described above. The URL handles audio capture, translation, and display all within the browser source.