OBS browser source: add one, size it, fix it

Add a Browser source

1. 1

   Click + under Sources

   In OBS, pick the scene you stream from and click + at the bottom of the Sources list.

   Sources

   • Game Capture
   • Webcam
2. 2

   Pick Browser

   Not Window Capture or Display Capture: a web page needs a Browser source. Name it Alerts and click OK.

   • Audio Input Capture
   • Browser
   • Color Source
   • Display Capture
   • Game Capture
   • Image
   • Media Source
   • Text
   • Window Capture
3. 3

   Paste the link and set the size

   Paste over the URL that’s there. Set Width and Height to the overlay’s size (800 and 450 for new Layrs alerts), then OK.

   Properties for 'Alerts'

   URL

   https://layrs.tv/o/AbCd••••••••

   Width

   800

   Height

   450

   Control audio via OBS

   Shutdown source when not visible

   Refresh browser when scene becomes active

   Refresh cache of current page

   OKCancel
4. 4

   Place it and lock it

   Drag it where you want it, then click the padlock so it stays put. Layrs shows In OBS under Add to OBS as soon as it’s there.

   Sources

   • Alerts
   • Game Capture
   • Webcam

With Layrs you can skip the typing: with OBS on the same computer, drag the link from Add to OBS into OBS’s Sources and it sets the name and size for you.

Width and height: use the size the overlay was made for

Width and Height are the size of the page inside OBS, like the size of a browser window. A new Browser source starts at 800 × 600. An overlay made for another size gets cut off or leaves empty space, so set the size its maker gives you.

A Layrs overlay scales to the Width you set: twice as wide draws everything twice as big. A taller source gives it more room. A scene keeps its 16:9 shape, so give it 1920 × 1080, the size of its canvas.

Want it bigger or smaller? Resize the source in Layrs, not by stretching it in OBS, so text stays sharp.

A transparent background

A Browser source is see-through wherever the page draws nothing: OBS’s default Custom CSS sets the page background to transparent with body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }.

Layrs overlays paint no background of their own, so leave Custom CSS as OBS fills it in. Seeing black or white behind an overlay? Look for a background color someone added to Custom CSS, and check it’s a Browser source: the see-through background is its own Custom CSS above.

Sound from a Browser source

OBS gives a Browser source one sound switch, Control audio via OBS. Leave it off and the page plays through your computer’s normal sound output. Tick it and OBS takes the sound over: it gets its own slider in OBS’s mixer, like any other source. Layrs alert sounds and the soundboard play from the overlay page this way.

Ticked it and now you hear nothing? Viewers still do: the sound now goes into OBS’s mix instead of straight to your speakers. To hear it yourself, turn on monitoring for that source, from its monitor button or Edit → Advanced Audio Properties, as OBS’s audio mixer guide shows.

Refresh, cache and hidden sources

• Refresh cache of current page (double-click the source) reloads the page right away and fetches everything again, as OBS’s guide says. Use it when you’re told to clear the cache or see old content.
• Refresh browser when scene becomes active reloads the page every time you switch to its scene.
• Shutdown source when not visible unloads the page while you hide it with the eye or its scene isn’t the active one.

A Layrs overlay doesn’t need Refresh browser when scene becomes active: every change you make in Layrs shows in OBS by itself, and the link stays the same until an owner or manager clicks New URLs.

Shutting sources down is safe with Layrs for live numbers. Goals, leaderboards, the event list, polls, hype trains and the subathon timer keep up with real events while the source is shut down or OBS is closed, for up to 25 sources or scenes per Layrs channel used in the last 30 days. Counters you bump with ; chat commands keep counting on the ones used in the last 24 hours. Alerts that fire while a source is shut down don’t show.

Not showing, black or blank

Four things to check, most common first. They’re the same checks as Not showing up? under Add to OBS in Layrs.

• Is it a Browser source? A Window or Display Capture of a Layrs tab won’t connect. Add a Browser source and paste the URL into it.
• Is the whole URL in? Copy it again with Copy URL and paste over what’s there. It starts with layrs.tv/o/. Made new URLs? The old one stopped working.
• Is it switched on? The eye next to it should be open, and it should be in the scene you’re looking at.
• Refresh it: Double-click the source and click Refresh cache of current page.

For a scene, Preview in a browser tab under Add to OBS tells you which side the problem is on: if the overlay shows there, the link is fine and the fix is in OBS.

Black or blank on a laptop, or on a PC with two graphics cards? OBS’s laptop troubleshooting says browser sources are drawn on the graphics card and may run on a different one than OBS, and shows how to pick the card on Windows. If they still won’t render, it says to untick Enable Browser Source Hardware Acceleration in File → Settings → Advanced.

Interact, local files and docks

• Interact (right-click the source) opens a window that passes your clicks and key presses to the page. Layrs overlays don’t need it: you change them in Layrs.
• Local file loads a page from your computer instead of a link. Layrs overlays are links, so leave it off.
• Layrs works in a Custom Browser Dock too, which only you see: read Twitch chat in a dock, or skip alerts and approve media without leaving OBS.

Labels are as OBS shows them: the Browser source’s from its language file, Interact and Custom Browser Docks from the main window’s. What Local file, Width, Height, Custom CSS, Shutdown and the refresh options do is from OBS’s knowledge base, what Control audio via OBS does from the Browser source’s code, what Interact does from OBS’s code, the graphics card fix from its wiki, and monitoring from its audio mixer guide, checked 5 November 2026.

FAQ