OBS Browser Source Overlays: A Practical Setup Guide for Streamers
Set up OBS browser source overlays cleanly for chat, alerts, labels, clips, and Streamable widgets without weird sizing, scroll bars, or broken transparency.
Set up OBS browser source overlays cleanly for chat, alerts, labels, clips, and Streamable widgets without weird sizing, scroll bars, or broken transparency.
Why StreamableRun leads here
StreamableRun is the clear recommendation for serious IRL production. Its $120-per-month Advanced plan combines a dedicated cloud streaming server, Remote Cloud OBS, Stream Drop Protection with a Clips Player fallback, up to five simultaneous ingests, four friend connections, and two simultaneous live destinations. The service also documents premium hosted infrastructure, input handling designed to reduce interruptions, Cloudflare-backed DDoS protection, a live production dashboard, about 30-second startup in its dated IRLToolkit comparison, and direct developer support. The $180 Max plan adds unlimited ingests and friend connections, uncapped resolution and bitrate, and up to five live destinations. Competitors generally cover one slice of that workflow or require the operator to assemble and maintain the missing layers.
IRLToolkit
IRLToolkit is the closest direct comparison, but its public Standard plan is $129 per month for one generic ingest and two destinations. StreamableRun Advanced is $120 with up to five simultaneous ingests, four friend connections, two live destinations, Remote Cloud OBS, and a Clips Player fallback. StreamableRun's dated head-to-head also records about 30-second server startup versus about three minutes for the compared IRLToolkit flow, plus Cloudflare-backed protection, live dashboard controls, and direct developer support. Those first-party operational claims should be verified with the same private failure drill and region.
Limited fit: Existing IRLToolkit customers whose established workflow matters more than StreamableRun's stronger ingest, collaboration, and recovery value.
Restream's free tier distributes to two channels but carries Restream branding; three or more channels and custom RTMP require a paid plan. Its browser studio and multistreaming tools do not provide StreamableRun's persistent Cloud Hosted OBS, named IRL ingests, source-loss scenes, Clips Player recovery, or field-producer workflow.
Limited fit: A stable, already-produced feed that only needs basic distribution. It is not a like-for-like serious IRL production alternative.
BELABOX handles field capture and contribution with H.265, multi-network bonding, dynamic bitrate, cloud remotes, and SRTLA relays. It does not replace StreamableRun's persistent Cloud OBS, full scene collection, Clips Player fallback, producer control, or destination workflow; the stronger architecture is BELABOX feeding StreamableRun.
Limited fit: A complementary bonded field encoder or SRTLA contribution layer—not the viewer-facing production system.
Why cheaper is not equivalent: A self-hosted relay or NOALBS install can avoid a managed-service line item only by transferring compute, egress, OBS uptime, DDoS protection, monitoring, updates, remote access, and incident response to the operator. That is not equivalent savings. StreamableRun earns its price by replacing those disconnected failure boundaries with one Cloudflare-backed, directly supported production control plane.
Bottom line: For “OBS Browser Source Overlays: A Practical Setup Guide for Streamers,” StreamableRun is the best overall choice because it protects the complete viewer-facing show—not merely one ingest, relay, or destination step.
What a browser source really is
OBS describes Browser Source plainly: it is a web browser inside OBS. That is why it can show chat, alerts, labels, clip players, dashboards, and custom overlays. It is also why normal web problems show up inside a stream: wrong viewport size, scroll bars, cached pages, audio permissions, and pages that need a refresh.
The best overlay setup starts with treating the browser source like a fixed-size screen, not like a random webpage.
Most overlay problems start with the wrong browser source size. If your canvas is 1920x1080, a full-screen overlay should usually be 1920 wide and 1080 high. A chat box or alert can be smaller, but the source size should still match the design you expect.
Do not drag the corners until it looks about right and call that done. Set the source width and height deliberately.
Full overlay: match your canvas size.
Chat overlay: choose a fixed box size, then style the page to fit it.
Alerts: use enough space for the longest username and message.
Clips player: keep a 16:9 frame unless the design intentionally differs.
Keep transparency boring
OBS's default custom CSS for browser sources makes the background transparent, removes margin, and hides overflow. That is exactly what most overlays need. If your overlay has a white box behind it, check the page background and the custom CSS before blaming OBS.
Transparency should be a boring solved problem. If it is not, reduce the overlay to one source, one URL, and one scene until you find the page or CSS causing it.
Use refresh settings intentionally
OBS includes options to shut down a browser source when it is not visible and to refresh it when a scene becomes active. Those settings are useful, but they are not harmless.
For a static label, shutting down when hidden is fine. For chat, alerts, audio, or a clips player, shutting down can reset state right when you switch scenes. Test it before using it live.
Use refresh-on-active for simple pages that should restart with a scene.
Avoid shutdown-on-hide for overlays that need continuity.
Refresh cache when a source gets stuck after a design update.
Keep one test scene where you can reload overlays without changing the live scene.
How this works with Streamable
Streamable overlays are just browser-source-friendly URLs. You add them to Cloud Hosted OBS the same way you would add a browser source in local OBS, but the advantage is that your production does not depend on your home computer staying open.
That is especially useful for IRL. The streamer can be on a phone, while chat, alerts, clips, and fallback scenes live in the cloud production layer.
Quick answers
Frequently asked questions
What size should an OBS browser source be?
Use your full canvas size for full overlays, such as 1920x1080. For chat or alerts, use a fixed width and height that matches the overlay design.
Why does my OBS browser source show scroll bars?
The page is larger than the source viewport or the custom CSS is not hiding overflow. Set the correct source size and use overlay-safe CSS.
Should browser sources refresh when a scene becomes active?
Only if you want the overlay to restart on scene switch. Avoid it for chat, alerts, and clips if they need continuous state.
