To add overlays in OBS Studio, add each overlay file as a Media Source inside a scene, stack sources in the order you want them rendered (top of the Sources list draws on top), and use transparent WebM or alpha MOV files so the overlay composites over your gameplay with no keying step.
That covers the mechanics. What trips people up is the model around the mechanics — what belongs in a scene versus a source, which file formats keep their transparency, why an overlay plays once and freezes, and how alerts, webcam frames, and stingers layer into one coherent setup. This guide is that model, in order.
Scenes vs Sources: the Mental Model
OBS has exactly two building blocks, and every overlay question resolves into one of them:
- A scene is a layout — Starting Soon, Gameplay, Be Right Back. You switch between scenes while live.
- A source is a layer inside a scene — your game capture, webcam, an overlay video, an alert widget, a text label.
Sources render in list order: the top of the Sources list draws in front. A typical gameplay scene, top to bottom, looks like this:
- Alerts (Browser Source)
- Webcam frame overlay (Media Source or Image)
- Webcam (Video Capture Device)
- Screen overlay — grain, ambient particles (Media Source)
- Game or display capture
One power move worth knowing early: a scene can be added as a source inside another scene. Build your “webcam + frame” combo once as its own scene, then drop that scene into Gameplay, Chatting, and BRB — reposition it per scene, restyle it in one place.
What File Formats Work for OBS Overlays?
OBS plays anything FFmpeg plays, but transparency support is what separates overlay formats:
| Format | Transparency | Use it for |
|---|---|---|
| WebM (VP9 alpha) | Yes — native, no keying | Animated overlays, stingers, alerts |
| MOV (ProRes 4444 / alpha) | Yes — native | Same jobs, much larger files |
| MP4 (H.264) | No — but Screen blending fakes it for bright-on-black effects | Light effects, grain, VHS static |
| PNG | Yes (static) | Webcam frames, static borders |
H.264 MP4 cannot carry an alpha channel, but for effects that are pure light on black — VHS static, sparkles, snow, glitches from the free overlays library — you don’t need one: right-click the source → Blending Mode → Screen, and the black background drops out. Why some containers carry alpha and others can’t is covered in Video Codecs for Motion Graphics Compared.
How Do You Add an Animated Overlay as a Media Source?
- In the Sources panel, click + → Media Source and name it something you’ll recognize in six months (“frame-cam-purple”, not “Media Source 7”).
- Click Browse and pick your WebM, MOV, or MP4 overlay file.
- Check Loop — without it, the overlay plays once and freezes on the last frame, the single most common OBS overlay complaint.
- Leave Use hardware decoding when available on; it moves playback off your CPU.
- Drag the source into position and scale it with the red bounding box (hold Alt while dragging an edge to crop instead).
Two settings worth knowing in the same dialog: Restart playback when source becomes active makes the overlay start from frame one every time you switch to the scene (right for intro animations, wrong for ambient loops), and Close file when inactive frees memory in scenes you’re not showing at the cost of a brief load when you switch back.
When Should You Use a Browser Source Instead?
A Media Source plays a file; a Browser Source renders a live web page — and that’s how alert services (StreamElements, Streamlabs), chat boxes, goal bars, and recent-follower widgets work. You paste the widget URL from the service’s dashboard, set the size to match your canvas (1920×1080 for most streams), and OBS renders it with full transparency.
The practical split: files you control → Media Source; live data from a service → Browser Source. Browser sources cost more RAM per instance, so consolidate widgets where the service allows it, and enable Shutdown source when not visible for heavy ones. OBS’s own Sources Guide documents every source type if you want the full catalog.
Stinger Transitions: the Scene Switch That Looks Produced
A stinger is a short transparent animation that plays over a scene switch — the swipe that hides the cut. OBS supports them natively:
- In the Scene Transitions dock, click + → Stinger and name it.
- Set Video File to a transparent WebM (VP9 alpha) — this is the one job where the WebM-with-alpha format is essentially mandatory; an opaque MP4 stinger covers the screen with a black rectangle mid-transition.
- Set the Transition Point — the millisecond at which OBS actually swaps scenes. Pick the moment your animation fully covers the frame, and the cut becomes invisible.
A good stinger runs 0.5–1.5 seconds total. Longer than that and scene switches start to feel like ad breaks.
Layering a Webcam Frame
The webcam frame is the highest-visibility overlay on the whole stream, and it’s a two-source sandwich: the frame graphic in the Sources list directly above the Video Capture Device, sized so the camera feed sits inside the frame’s opening. Position the camera first, then scale the frame to it — not the other way around, because re-cropping a camera is fiddlier than nudging a PNG.
For an animated frame, use a looping transparent WebM as the frame layer; for a static one, a PNG with alpha costs essentially zero decode. Either way, group the camera and frame (select both → right-click → Group) so they move as one unit when you rearrange a scene at 2 a.m. before going live.
Building the Full Package
Overlays are one layer of a stream identity — the complete build (starting soon screen, BRB screen, ending screen, alerts, and the OBS scene collection that ties them together) is walked through step by step in Free Twitch Overlays: Build a Full Stream Package for $0. For manually triggered celebration moments, a pre-keyed subscribe-button animation bound to a hotkey is the free alternative to paid alert packs.
A panel-sized QR code for your Discord or tip page is another cheap addition: viewers watching on TV or a second monitor scan it instead of typing a link they’ll forget. QRocket generates them free and exports SVG, so the code stays sharp when you scale it down to panel size in OBS.
One adjacent tip, since it bites almost every new streamer: record to MKV (Settings → Output), so a crash mid-session can’t corrupt the whole recording — then run the file through the free MKV to MP4 converter before editing, since most editors won’t open MKV.
FAQ
Does OBS support transparent MP4 overlays?
No — H.264 MP4 can’t store an alpha channel. Use WebM (VP9 alpha) or a ProRes 4444 MOV for true transparency, or composite bright-on-black MP4 effects with the source’s Screen blending mode instead.
Why does my overlay play once and then freeze?
The Media Source’s Loop checkbox is off. Open the source’s properties and enable Loop; for overlays that should restart on every scene switch, also enable “Restart playback when source becomes active.”
Do animated overlays hurt stream performance?
Modestly, and manageably. Keep overlay files at or below your canvas resolution (a 4K overlay on a 1080p stream is wasted decode work), leave hardware decoding on, and enable “Close file when inactive” on heavy sources in scenes you rarely show.
What resolution should my OBS overlays be?
Match your base canvas — 1920×1080 for most streams. Full-frame overlays should be exactly canvas-sized; elements like webcam frames can be smaller files positioned where needed, which also cuts decode cost.
Can I use the same overlay setup for Twitch and YouTube?
Yes — scenes, sources, and overlays are platform-agnostic; only your stream key and output settings change. Duplicate your profile (Profile → Duplicate) if the two platforms need different bitrates, and keep one scene collection for both.
