How to add a transparent animation to OBS Studio
OBS Studio plays a WebM with an alpha channel transparently in a Media Source, so an alert, a banner or a scene card exported as VP9 WebM sits over your game or camera with nothing behind it.
A stream graphic has less room for error than one in an edited video: it plays live, over a game or a face, and a black rectangle behind it is on screen for everybody at once. OBS handles transparency properly as long as it gets the right file, and the right file here is small, cheap to play and one choice in the export panel.
Export a WebM with alpha
In the export panel, choose OBS Studio under Where will you use this. The format becomes WebM · transparent, for web — VP9 video with an alpha channel, which OBS decodes with its transparency intact. A six-second 1080p overlay comes out around a megabyte, so a scene full of them costs almost nothing to load or play.
ProRes 4444 plays in OBS too, at many times the size, and there is no reason to carry it here. An ordinary MP4 is the one to avoid: it has no alpha channel, so the graphic arrives on a black card over your gameplay. On a plan, a WebM counts as an ordinary export rather than one of the month's 4K-and-ProRes ones.
Add it as a Media Source
In the scene, press + under Sources, choose Media Source, name it, and point Local File at the WebM. Three settings decide how it behaves. Loop is for things that stay up, such as a frame around the camera or a starting-soon card. Restart playback when source becomes active makes it play from the first frame every time it is shown, which is what an alert needs. Show nothing when playback ends clears it once the animation is over, so the last frame does not hang on screen.
Export at the size of your canvas — Landscape for a 1920×1080 stream, Vertical for 1080×1920 — and a full-frame graphic lines up with Fit to screen in the source's Transform menu. A smaller one can be dragged and sized in the preview like any other source.
Play it on cue
With Restart playback turned on, showing the source plays it. Click the eye beside it in Sources, or give it a key: under Settings, then Hotkeys, every source has Show and Hide keys in each scene, and every Media Source has Restart, Play and Stop. A key on a subscribe reminder means one press puts it on screen mid-sentence.
Alerts that fire on a follow or a donation come from an alert service rather than from OBS, and they are drawn in a Browser Source, which is Chromium and plays a transparent WebM the way a browser does. Most of those services take a video upload for the alert's animation, and the same file works there.
As a stinger transition
The same kind of file can carry a scene change. Under Scene Transitions press +, choose Stinger, and pick the WebM as the video file. Transition Point is the moment OBS actually switches scenes underneath: set it to where the animation covers the whole frame, and the cut hides behind it.
A stinger needs a design that fills the screen at some moment — a wipe, a burst, a panel sweeping across — which is a different brief from an alert that keeps to a corner. Both come out of the same export panel, at the same size, with the same transparency.
Questions
- What video format does OBS support with transparency?
- WebM with VP9 and an alpha channel is the practical one: small, and played with its transparency by both the Media Source and the Stinger transition. ProRes 4444 works too, at far greater size. MP4 cannot carry transparency at all.
- Why does my overlay have a black background in OBS?
- The file has no alpha channel, which is what happens with any MP4. Export it again as a WebM with transparency. A green-screen MP4 with OBS's Chroma Key filter also works, but a transparent file needs no filter.
- Does the same file work in Streamlabs Desktop?
- Yes. Streamlabs Desktop is built on OBS and adds media the same way, so the WebM and the settings described here apply unchanged.