OBS browser source overlays for iRacing

Browser sources are what let a broadcast app put live graphics into OBS while the simulator stays a clean video source underneath. For iRacing they carry timing towers, driver lower thirds, flags, incident notices, starting grids, results, sponsor straps and race-control messages. Test your exact OBS version, graphics driver and full scene before race night.

What is an OBS browser source?

An OBS browser source is a source type that loads a web page inside an OBS scene. Instead of adding a static image, text layer or video file, OBS can display a live web-based graphic. That makes browser sources a good fit for race overlays that need to change during a session.

For iRacing, a browser source might show the running order, driver name, car class, gap, flag state, fastest lap, incident message, starting grid, results graphic or sponsor panel. The broadcast software controls what the graphic shows, and OBS displays the browser source on top of the iRacing feed.

Why they suit iRacing broadcasts

A clean iRacing broadcast normally has two separate layers: the simulator video and the broadcast graphics. The simulator feed shows the car, track and camera angle. The overlay layer explains the race to the viewer. Browser sources are the bridge between those two parts.

• They keep OBS organised: overlays stay separate from the iRacing capture, so the scene is easier to manage.
• They update live: timing, flags, driver names and graphics can change as the race changes.
• They support transparency: the overlay can sit on top of the race without blocking the whole screen.
• They are easy to layer: timing towers, lower thirds, sponsor straps and full-screen graphics can be stacked in OBS.
• They are easier to redesign: a browser-based overlay can be restyled without rebuilding an entire OBS scene.

Browser sources vs other OBS sources

Game capture or display capture gets iRacing into OBS. Image sources are good for static sponsor logos. Text sources can work for simple labels. Browser sources are different because they can display live, changing web graphics.

OBS source type	Best use	Broadcast limitation
Game capture	Capturing the iRacing video feed.	Does not add dynamic broadcast graphics by itself.
Image source	Static logos, sponsor marks and background graphics.	Not suited to live timing or changing race data.
Text source	Simple labels and static messages.	Hard to manage for complex timing towers or graphics packages.
Browser source	Live overlays, timing, flags, lower thirds, grids, results and race graphics.	Needs correct sizing, layering and performance testing.

Common iRacing browser source overlays

A proper iRacing broadcast usually needs more than one overlay. The key is not to show everything all the time, but to give the viewer the right information at the right moment.

Overlay	Purpose	When to use it
Timing tower	Shows positions, gaps, class colours and driver information.	Most of the race, especially during green-flag running.
Lower third	Identifies a driver, team, car, commentator topic or battle.	When the camera cuts to a driver or important race story.
Flag banner	Shows green, yellow, chequered or other race states clearly.	At race start, cautions, restarts and finish.
Incident notice	Helps viewers understand why the broadcast is moving to a replay or different camera.	When something happens off-camera or needs explanation.
Starting grid	Introduces the race and starting order.	Before green flag or during pre-race coverage.
Results and podium	Finishes the broadcast with clear final results.	After the race, class results or championship segment.
Sponsor strap	Gives sponsor visibility without taking over the stream.	Breaks, caution periods, pre-race, post-race and quieter race moments.

How to add a browser source overlay in OBS

For most league broadcasts, start simple. A browser source that looks right in a preview window can still be too small, too large, cropped or hard to read once it is live on stream.

Recommended settings

• Canvas size: match your OBS canvas, commonly 1920x1080 for a normal 1080p broadcast.
• Layer position: put browser-source overlays above the iRacing video feed.
• Transparency: use transparent overlay backgrounds where possible so the race remains visible.
• Readability: check the overlay on a phone-sized preview, not only on your main monitor.
• Performance: test CPU and GPU headroom with iRacing, OBS, audio, overlays and replay workflow all running.

Steps

1. Create the OBS scene: start with a clean live race scene containing your iRacing capture.
2. Add a Browser Source: create a new browser source for the overlay you want to display.
3. Paste the overlay URL: use the browser-source URL from your broadcast software or overlay tool.
4. Set width and height: match your OBS canvas or the overlay’s required dimensions.
5. Position the overlay: put it where viewers can read it without covering the racing line.
6. Test race conditions: run iRacing, OBS, commentary audio and overlays at the same time before using it live.

How to layer iRacing overlays in OBS

Layering matters. If a source is in the wrong order, it may hide the simulator, sit behind the capture, block important racing action or cover another graphic. A simple scene order is usually best.

Layer order	Source	Example
Top	Emergency or full-screen graphics	Red flag, replay wipe, full-screen results.
Upper overlay	Lower thirds, flags, incident messages	Driver card, safety car banner, penalty message.
Main overlay	Timing tower and persistent graphics	Running order, class tower, lap counter.
Base	iRacing video capture	Game capture, display capture or spectator PC feed.

Local vs hosted browser sources

Some overlay tools run locally on the broadcast PC. Others provide hosted browser links. Both can work, but the production risks are different. Local overlays can be faster and easier to keep inside your own machine, while hosted overlays can make remote workflows and multi-PC setups easier if the service is reliable.

Type	Strength	Watch out for
Local browser source	Good for low-latency overlays running on the broadcast PC.	The PC must have enough headroom for iRacing, OBS and overlays.
Hosted browser source	Useful for remote workflows, shared links and cloud-supported production.	Needs reliable internet and controlled access to avoid mistakes.

Test performance before race night

Browser sources are capable, but a bad overlay setup can still hurt a broadcast. The risk is higher during endurance events because the stream may run for many hours. Test the entire setup while driving or spectating, not just while sitting in an empty session.

• Avoid unnecessary duplicate browser sources across too many scenes.
• Keep overlay animation clean and purposeful rather than constantly moving.
• Test with the same resolution and bitrate you will use on race night.
• Check CPU, GPU and memory usage with iRacing, OBS, Discord, overlays and replay workflow running.
• For long events, do a longer test rather than only a five-minute preview.

Run the PC load test before adding hardware, and choose only the overlays that explain the race.

Race-night checklist

• The browser source URL loads correctly.
• The source size matches the OBS canvas or overlay design.
• The overlay is above the iRacing capture in the scene stack.
• Text is readable on phone, tablet, desktop and TV previews.
• The overlay does not cover the racing line or important camera areas.
• CPU, GPU and stream performance are tested with the full race-night setup.

Troubleshooting OBS browser source overlays

Most browser-source problems are simple once you know where to look. The common issues are wrong size, wrong layer order, stale browser data, missing transparency, a broken URL or a source that has been accidentally hidden behind the iRacing capture.

The overlay is completely blank

Confirm iRacing is in an active session, EDR Broadcast is connected, the browser URL is correct and the source canvas is not cropped. Refresh only after checking the host state.

The overlay works but text is soft

Use the intended browser canvas size, commonly the same as the OBS canvas, and transform the source instead of stretching a tiny page.

OBS performance drops when all overlays are added

Disable or unload sources not used in the current scene, reduce unnecessary animation and test browser-source load one item at a time.

The overlay is behind the game capture

Move the browser source above the iRacing capture in the OBS source list and confirm the source itself has a transparent background.

Quick reference

Problem	Likely cause	Fix
Overlay does not show	Wrong URL, source hidden or source below iRacing capture.	Check the URL, visibility toggle and source order.
Overlay is cropped	Browser source width or height is too small.	Set the browser source size to match the overlay or canvas.
Overlay has a background box	Overlay is not transparent or wrong theme is selected.	Use a transparent overlay theme or correct browser-source URL.
Text is too small	Overlay was designed for a different resolution or scaled down too far.	Use a 1080p-friendly layout and test on a phone-sized preview.
Overlay feels laggy	Too many sources, heavy animations or not enough PC headroom.	Simplify sources, reduce animation load and test full production performance.

How EDR Broadcast uses browser-source overlays

Browser-source overlays are important, but they are not the full broadcast. A clean timing tower does not decide which battle to show. A lower third does not run the replay. A flag banner does not manage race-control messages. Good overlays need to sit inside a complete production workflow.

EDR Broadcast is a Windows app for iRacing built on that idea: OBS or vMix handles the stream, and EDR Broadcast helps run the race show. Browser-source overlays are the output layer. The operator controls the graphics and race workflow from EDR Broadcast, and OBS displays the visual pieces as transparent browser sources.

• Timing and leaderboard overlays: show the race order, classes and gaps in a viewer-friendly way.
• Driver lower thirds: identify who the camera is showing and give commentators context.
• Flag and race-state graphics: make cautions, restarts and finish moments clearer for viewers.
• Replay and incident workflow: support the operator when something important needs to be explained.
• Camera direction: the Auto-Director picks the shot while you keep control.

Free includes the leaderboard, lower thirds, ticker, flags, grid intro and podium. Auto-Director, replay, incidents and race control are Pro. See pricing for the full plan list.

For a wider look at tools, read the iRacing broadcast software comparison. For overlay-specific choices, read choosing iRacing broadcast overlays. If you run long races, the iRacing endurance broadcast setup guide explains how overlays, remote control and production shifts fit together.

Frequently asked questions

What size should an OBS browser source be for iRacing?

For a 1080p broadcast, a common starting point is 1920x1080 so the browser source matches the OBS canvas. Some overlays may require a different size depending on the design.

Why is my OBS browser source overlay not showing?

The most common causes are a wrong URL, hidden source, incorrect source order, network issue or the browser source being placed behind the iRacing capture.

Can browser source overlays hurt performance?

They can if there are too many sources, heavy animations or not enough PC headroom. Test overlays with iRacing, OBS, audio and replay workflow running together.

Does EDR Broadcast use browser-source overlays?

Yes. EDR Broadcast outputs transparent browser-source graphics for timing, flags, lower thirds and wider race production, for use in OBS or vMix.