An overlay that will not show up in OBS is frustrating precisely because there is no error message — you get an empty scene and no clue why. Work down this list in order. It is sorted by how often each cause turns out to be the real one.
1. The overlay is behind something else
OBS draws the source at the top of the Sources list in front of everything below it. If your overlay sits under a full-screen game capture or display capture, it is loading perfectly and you simply cannot see it. Drag it to the top of the list and check again. This is the single most common cause, and it costs nothing to rule out first.
2. The source is hidden
Check the eye icon next to the source. Also check the eye icon on the group if the overlay lives inside one — a hidden group hides everything in it, and the source inside still shows as visible.
3. Width and height are still 800 × 600
Every new Browser Source in OBS starts at 800 × 600 pixels. Those fields set the viewport the web page is rendered into. Left at the default, a 1920 × 1080 overlay gets squeezed into a small box and then scaled back up, which shows as blurry edges, cropped elements, or a layout where nothing sits where it should. Open the source properties and set Width to 1920 and Height to 1080, then reset the transform on the source.
4. Your overlay is on a black or white rectangle
That is the transparency CSS being missing. OBS pre-fills the Custom CSS box of every Browser Source with:
body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }If that box is empty, or someone edited it, the page renders with its own opaque background. Paste the snippet back exactly as written.
5. Shutdown source when not visible is on
This setting unloads the page whenever the source is hidden. The symptom is specific: the overlay works, but anything with a running state resets on every scene switch — the chat box is empty, the goal bar animates in from zero, the recent-follower label is blank. Turn it off unless you are genuinely short on system resources.
6. It needs a refresh, not a fix
Browser sources cache. If you changed something in StreamElements and OBS is still showing the old version, open the source properties and use Refresh cache of current page. You can also tick Refresh browser source when scene becomes active while you are actively editing, so every scene switch reloads it — just be aware that same setting resets running state, so it is a temporary convenience rather than a permanent one.
7. The URL is not the URL you think it is
Overlay URLs are long and easy to truncate when copying. Open the source properties, select the whole URL field, and confirm it ends the way it should rather than mid-string. Paste it into a normal browser tab: if the overlay renders there, OBS is not the problem; if it does not, the link is wrong or the overlay was deleted on the StreamElements side.
8. You are editing the wrong scene
Easy to do with several similar scenes, and easier still with multiple scene collections. Confirm the scene you are looking at is the one that is live, and that you are in the right scene collection.
9. Hardware acceleration or a heavy scene
If the overlay appears but stutters, drops frames, or freezes after a while, you are hitting a performance ceiling rather than a configuration bug. Enable the custom frame rate on decorative browser sources and set it to 30 FPS — OBS uses 30 by default when you enable that option, and most overlays are animated at 30 anyway, so you lose nothing visible. Closing browser sources you are not using in the current scene helps too.
Still nothing?
If you bought the overlay from us and it will not load after all of this, message us with the product name and a screenshot of your Browser Source properties. Broken links get replaced.
Sources: OBS Studio documentation, Browser Source.