How to Add Overlays to OBS

Think in layers

OBS scenes are layered. Your camera, game, chat, alerts, and Upload Corner-style elements all compete for space. A good overlay setup starts by deciding what should never be covered.

Browser Source is flexible because it can render web content directly inside OBS, including layout, images, audio, and animation.

The setup flow

Create the source, set dimensions, place it, test it, then duplicate or reuse it carefully across scenes.

• Use a URL-based Browser Source.
• Set width and height deliberately.
• Keep transparent backgrounds when appropriate.
• Test scene switching before going live.

Keep overlays scene-aware

An overlay that works in a Just Chatting scene may cover the map in a game scene or the important text in a browser scene. Treat placement as scene-specific, even when the design language stays consistent.

The practical move is to build a small overlay checklist for each scene. What must never be covered? Where can alerts land? Does this scene need TTS captions or Upload Corner at all?

• Name browser sources clearly in OBS.
• Use fixed dimensions for each overlay source.
• Duplicate placement intentionally instead of dragging by feel.
• Review overlays after changing scenes or canvas size.