Which file an alert needs
Alert boxes from Streamlabs and StreamElements reach OBS as a Browser Source, and OBS documents that Browser Source is based on the Chrome Embedded Framework with a transparent page background by default. So an alert plays whatever Chrome plays:
- VP9-alpha WebM composites over your scene. This is the format to use.
- MP4 plays, but it has no alpha channel, so you get the alert plus a solid rectangle.
- ProRes 4444 MOV keeps alpha for editing software but does not play in a browser. Convert it with the free ProRes to WebM converter.
Streamlabs’ alert customization article lists WebM among the accepted alert formats, with a 45 MB maximum.
A real alert, tested
Our sample alert at three moments, composited over a busy scene. The drop shadow and the fade-out are partial transparency, which is what an alpha channel keeps and a chroma key cannot.
We built a 3-second “New follower” alert, 90 frames at 30 fps, and encoded it with the same VP9 settings as this site’s PNG sequence to WebM converter. It is free to use: download the sample WebM, drop it into OBS or your alert box, and you know within a minute whether your setup shows transparency.
| Version | File size | Decode time (3-second clip) | Alpha check |
|---|---|---|---|
| WebM, cropped to 800 × 300 | 94 KB | 0.08 s | Passes |
| WebM, same alert on a full 1920 × 1080 canvas | 96 KB | 0.51–0.66 s | Passes |
| MP4 (H.264), 800 × 300 | 23 KB | — | Fails: no alpha channel |
Two things the numbers show. Empty transparent space is almost free in file size: the full-screen canvas is only 1.3 KB bigger. But it is not free to decode: the full canvas took about seven times as much CPU time, because the decoder still processes every pixel. Both are far faster than real time, so this matters only when many alerts and overlays play at once. Cropping the canvas to the alert is the cheap win. (Decode times are single-threaded FFmpeg runs on our server, not measurements inside OBS. The alpha check is the same one this site runs on every finished background-removal job.)
We also played the sample in Chrome, the engine behind OBS Browser Source, over a red-and-green striped page: the stripes showed through the card’s translucent fill and its shadow.
Route 1: an alert box (Streamlabs, StreamElements)
- In your alert box settings, choose the alert type (follow, sub, donation) and upload the WebM as its image or video media.
- Copy the alert box widget URL and add it to OBS as a Browser Source, sized to your canvas.
- Send a test alert from the dashboard. You should see your scene around the card, not a rectangle.
If the test alert shows a black or white box, the file is the problem, not the alert box. See the fix below.
Route 2: OBS only, played once
For an alert you trigger yourself, with a hotkey or a scene switch, a Media Source is enough. Three settings from the OBS Media Source documentation turn it into a one-shot alert:
- Loop off, so it plays once.
- Restart playback when source becomes active on, so it starts from the beginning each time the source is shown.
- Show nothing when playback ends on, so the last frame does not stay on screen.
Then assign Show and Hide hotkeys to the source in Settings → Hotkeys. Show plays the alert; hide it and show it again to replay. For looping overlays and stinger transitions, see transparent video in OBS and OBS stinger transitions.
Making your own alert
- Animated graphics. Export the animation from After Effects, Blender or any editor as a PNG sequence with alpha, then turn it into a WebM with the free PNG sequence to WebM converter (files up to 50 MB and 10 seconds, after Google sign-in).
- Real footage. Film yourself waving, your pet, or a mascot on any background, then remove the background with AI. An alert is a few seconds long, so the 5 free credits new accounts get cover a 5-second clip. A personal clip stands out from template packs.
- Editor exports. A ProRes 4444 master from Premiere or Final Cut goes through the ProRes to WebM converter without losing alpha.
Every finished background-removal job on this site is checked for a real alpha channel before you can download it, so the file you upload to your alert box is not a guess.
If the alert shows a box
Drop the file into the transparency checker. It runs in your browser with no account. In our test, the MP4 version of the sample alert failed exactly this way. If the checker finds no alpha, export again with alpha or convert the frames to WebM. If it finds alpha but the box still shows, the player is ignoring it; the black background guide covers each case.
Questions people are asking
What video format should a stream alert be?+
A WebM with a VP9 alpha channel. Alert boxes play inside a browser, and browsers composite VP9-alpha WebM over your scene. MP4 has no alpha channel, so it shows a solid rectangle, and ProRes 4444 does not play in a browser at all.
How big can an alert file be?+
Streamlabs’ alert article lists a 45 MB maximum for alert media. In practice an alert is far smaller: our 3-second 800 × 300 sample is 94 KB as a transparent WebM.
Why does my alert show a black box?+
The file has no alpha channel, usually because it was exported as MP4 or re-encoded without one. Check it with the free transparency checker on this site, then export again with alpha or convert the frames to a VP9-alpha WebM.
Can I play an alert in OBS without Streamlabs or StreamElements?+
Yes. Add the WebM as a Media Source with Loop off, Restart playback when source becomes active on, and Show nothing when playback ends on. Showing the source plays the alert once; hide it and show it again to replay it.
Disclosure: BG Remover Online is this site’s product. The sample alert and the measurements above are our own; platform details come from the linked OBS and Streamlabs pages. AI assistance was used to draft and edit this article.