This guide covers every part of that workflow. By the end you will know why VP9 alpha is the right format, how to configure both Browser Source and Media Source in OBS, what to do when transparency mysteriously breaks, and how AI-generated alerts from tools like [AlertForge](/ai-transparent-video) produce these files natively without any manual export step.
---
Why Transparent WebM Beats Every Other Approach
Before getting into setup steps, it is worth understanding why the format matters. Stream alerts live on top of your content. A green or black background is not just ugly — it breaks immersion and makes your stream look amateur. There have historically been four ways to deal with this.
The Green Screen / Chroma-Key Method
You render or download your alert with a solid-colour background (almost always #00FF00), add it to OBS as a Video Source or Media Source, then stack a Chroma Key filter on top of it. OBS removes all pixels that match the key colour.
The problems are real and consistent:
PNG Sequences
A folder of numbered PNG files where each frame is a full-resolution RGBA image. This works, and alpha is perfect because PNG compression is lossless. The problem is file size. A 1080p alert at 30 fps for 8 seconds is 240 PNG files. Even highly compressed, that can easily run to several hundred megabytes for a single alert. Importing and playing them in OBS requires a slideshow plugin or scripting, and sync drift is a common issue.
Apple ProRes 4444 / MOV with Alpha
ProRes 4444 is the broadcast standard for alpha video and it is genuinely excellent. The alpha channel is clean, the quality is high, and professional motion designers work in it natively. The problems for streamers: file sizes are enormous (gigabytes per clip), macOS encodes it natively but Windows requires additional codecs, and OBS Media Source has a history of inconsistent alpha handling for QuickTime containers. It is the right format for a post-production pipeline, not a streaming PC.
WebM VP9 with Alpha Channel
WebM is an open container format maintained by the WebM Project (https://www.webmproject.org/). The VP9 codec encodes a separate alpha plane alongside the colour data. File sizes are small — a 1080p 8-second alert typically lands between 2 MB and 8 MB depending on motion complexity. Alpha is genuinely per-pixel and codec-compressed separately from the colour, so edges are clean. OBS Studio supports it natively on all platforms. Most browsers also support it natively, which is why Browser Source handles it correctly without any plugins.
The only real limitation is encoding speed. VP9 is computationally expensive to encode, which is why real-time recording in VP9 is rare. For pre-rendered alerts that are encoded once and played many times, that tradeoff is irrelevant.
---
VP9 Alpha: A Brief Codec Primer
You do not need to become a video engineer to use transparent WebM, but understanding the basics helps you troubleshoot when things go wrong.
How VP9 Stores Alpha
VP9 encodes an alternate video track in the same WebM container. The main track carries the standard colour channels (Y'CbCr). The alternate track carries the alpha (transparency) channel as a separate 8-bit greyscale video. White = fully opaque, black = fully transparent, grey = partially transparent.
The two tracks share the same timestamp sequence, so they stay frame-perfectly synchronised. The decoder reads both tracks simultaneously and composites the final RGBA output.
Why This Matters for Edge Quality
Because alpha is stored as a separate compressed video track, the codec can allocate more bitrate to edges where alpha values change quickly. This is why VP9 alpha edges look significantly cleaner than chroma-keyed edges on H.264 footage: the codec knows where transparency is and preserves it accurately.
Container vs Codec
WebM is the container. VP9 is the codec. A WebM file can technically contain other codecs (VP8 has its own alpha implementation; AV1 with alpha is emerging), but VP9 is the most widely supported combination in OBS, browsers, and streaming tools right now. When someone says "transparent WebM" they almost always mean VP9 alpha in a WebM container.
---
Setting Up Transparent WebM in OBS Studio
OBS Studio (https://obsproject.com/) supports transparent WebM through two different source types. Each has a different use case.
Method 1: Browser Source (Recommended for Hosted Alerts)
Browser Source renders a URL using the Chromium Embedded Framework inside OBS. Because it is a real browser engine, it handles VP9 alpha exactly as a browser would — natively and correctly.
This is the preferred method when your alerts are hosted (for example, an [AlertForge overlay URL](/obs-alerts)) because the alert widget handles triggering, queue management, and alert sound for you.
Step-by-step setup:
1. In OBS, go to your alert scene and click + under Sources.
2. Select Browser.
3. Give the source a name, for example "AlertForge Overlay".
4. Paste your overlay URL into the URL field.
5. Set Width to 1920 and Height to 1080 (match your canvas resolution).
6. Under Custom CSS, clear the default body { background-color: rgba(0,0,0,0); ... } line is already there by default — leave it. This sets the browser background to transparent.
7. Leave Shutdown source when not visible unchecked unless you have a specific reason to do so. Checking it causes a re-load delay when you switch scenes.
8. Click OK.
The Browser Source is inherently transparent — the Chromium renderer passes alpha through to OBS's compositor. Any WebM with VP9 alpha that loads in the browser will display with full transparency.
Lock and layer correctly: Place your Browser Source above your game capture in the Sources panel. OBS composites sources from bottom to top — sources lower in the list render first, sources higher in the list render on top.
Method 2: Media Source (For Local WebM Files)
Media Source plays local video files or direct file URLs. Use this when you have downloaded a transparent WebM file and want to trigger it manually, loop it as a scene decoration, or play it from a stream deck button.
Step-by-step setup:
1. Click + under Sources and select Media Source.
2. Uncheck Local File if you want to specify a file path manually, or keep it checked and click Browse to select your WebM file.
3. If using a local path on Windows, format it as: C:/Users/YourName/Alerts/sub-alert.webm
4. Check Loop if you want the animation to repeat (useful for animated cam frames and scene decorations).
5. Leave Restart playback when source becomes active checked if you want the animation to reset every time you switch to the scene.
6. Click OK.
Critical for alpha to work: After adding the source, right-click it in the Sources panel, go to Filters, and confirm there are NO Chroma Key or Colour Key filters applied. OBS will sometimes carry over filters from a copied source. Any colour-key filter will interfere with the native alpha.
Also confirm: in the source's Transform settings (right-click → Transform → Edit Transform), the Bounding Box Type should be set to Scale to inner bounds or No bounds, not a fixed crop that might clip your animation.
---
Comparison: WebM vs Other Transparent Alert Formats
| Format | Alpha Quality | File Size (1080p 8s) | OBS Support | Platform Support | Recommended Use | |---|---|---|---|---|---| | WebM VP9 alpha | Excellent | 2–8 MB | Native, all platforms | Excellent | Stream alerts, overlays | | PNG Sequence | Perfect (lossless) | 200–500 MB | Via plugin | Limited | Frame-perfect motion graphics export | | Apple ProRes 4444 | Excellent | 500MB–2GB | Inconsistent (platform) | macOS preferred | Post-production pipeline | | MP4 + Green Screen | Poor (fringing) | 10–30 MB | Native | Excellent | Avoid for alerts | | APNG (Animated PNG) | Perfect | 5–20 MB | Limited | Browser only | Small looping icons | | WebM VP8 alpha | Good | 3–10 MB | Native | Good | Legacy fallback | | AV1 alpha | Excellent | 1–4 MB | Emerging | Limited | Future standard |
For stream alerts in OBS in 2026, WebM VP9 alpha is the clear choice: small files, native OBS support, clean edges, cross-platform.
---
Troubleshooting: Alpha Not Rendering Correctly
Even with the right format, transparency can break in several ways. Here is a systematic approach.
Black Background Appearing Instead of Transparency
This is the most common issue and almost always happens with Media Source, not Browser Source.
Check 1: Confirm the file is actually a VP9 alpha WebM and not an H.264 or VP8 file with a black background. In Windows Explorer, right-click the file → Properties → Details and look for "Video codec" — you want "VP9". On macOS, open Terminal and run:
``bash
ffprobe -v error -show_streams -of json your-alert.webm | grep codec_name
`
You should see vp9 for the video stream and potentially a second vp9 entry for the alpha stream.
Check 2: Some builds of OBS Media Source require a specific compatibility setting for alpha. Go to the source's properties and look for YUV Colour Space — if it is set to anything other than Default, set it back to Default.
Check 3: Ensure no Colour Key or Chroma Key filter is stacked on the source.
Green Fringing Around Elements
You are not playing a VP9 alpha file — you are playing an H.264 or H.265 file with a chroma-key filter. The fringing is compression artefact contamination. Either obtain the correct WebM VP9 version of the alert or accept the fringing.
Alert Plays But Transparency Works Only Partially
This typically means the source file has a premultiplied alpha track rather than a straight (unassociated) alpha track. Most video tools export straight alpha, but some legacy exports or screen-recording tools export premultiplied. If you encoded the WebM yourself, check your FFmpeg export flags — straight alpha is -vf "format=yuva420p" without premultiplication.
Browser Source Transparency Works in Studio But Not in Recording/Stream Output
Go to Settings → Output in OBS. If you are recording, make sure your recording format is not MP4 with H.264 — that container cannot carry alpha. For recording with transparency, use MKV + FFmpeg custom output. For streaming, alpha is discarded in the RTMP stream regardless (viewers see your composited scene, not individual transparent layers). This is correct behaviour — alpha is a production-side compositing concept.
Alert Flickers or Shows One Frame of Black
This is a browser source timing issue. The WebM file loaded but the first frame decoded before the alpha track was ready. Add a 100ms CSS animation delay in your overlay code, or use the preload="auto" attribute in the video element if you control the overlay HTML.
---
How AlertForge Generates Transparent WebM Natively
[AlertForge](/ai-transparent-video) uses the Veo 3.1 family of video generation models (Google DeepMind's video generation pipeline) to render alert animations. The generation pipeline outputs RGBA video frames, which are then encoded directly to VP9 alpha WebM in the render worker — no chroma-keying, no post-processing step, no green screen ever appears.
The render quality tiers available are:
Credit costs for transparent WebM renders: 720p × 5s = 8 credits; 720p × 8s = 13 credits; 1080p × 8s = 20 credits. Audio-enabled renders cost 1.5× the base credit price, adding a generated alert sound to the file.
Because transparency is a native output of the pipeline, every alert downloaded from [AlertForge](/twitch-alerts) is immediately usable in OBS without additional processing.
---
Advanced: Looping, Layering, and Cam-Frame Composites
Looping Alerts as Scene Decorations
Not every animated element needs to be a triggered alert. Logo animations, border effects, and particle backgrounds work well as looping Media Sources. Set the Media Source to Loop in properties. Keep the loop point clean — if the first and last frame are not visually identical, you will see a pop at the loop boundary. AlertForge generates seamlessly looping clips when you describe "looping" in your prompt.
Layering Multiple Transparent Sources
OBS composites sources from the bottom of the Sources list upward. A typical layered alert scene might look like:
1. (Top) Alert browser source — fires on events 2. Cam frame overlay — transparent PNG or animated WebM border around webcam 3. Webcam capture 4. Game capture 5. (Bottom) Background/colour source
Each layer is independent. You can have a looping animated cam frame (transparent WebM) permanently visible while alert animations fire above it.
Transparent Cam Frames
Animated Overlay Packs from [AlertForge](/animated-overlay) include cam frame panels generated by GPT-Image-2 and animated by Kling Video v3 Pro (on Max and Ultra plans). These are transparent WebM files designed to sit directly over your webcam layer. [BiRefNet v2](https://arxiv.org/abs/2401.03395) handles background removal from the camera region when compositing is needed.
The setup is the same as any Media Source — add as a source above your webcam capture, enable loop, done.
Scene-Switching Transitions
You can use a transparent WebM as a stinger transition in OBS. Go to Scene Transitions at the bottom of OBS, click +, select Stinger, then point it at your WebM file. OBS will play the animation over the scene switch, using the alpha channel to composite the transition over both the outgoing and incoming scenes.
For a stinger to work correctly: the animation should start fully transparent, sweep to fully opaque at the midpoint (where OBS performs the cut), then return to fully transparent. The transition duration in OBS should match the WebM file's duration exactly.
---
Quick Reference: OBS Source Settings for Transparent WebM
| Setting | Browser Source | Media Source | |---|---|---| | Custom CSS background | rgba(0,0,0,0)` | N/A | | Loop | Via overlay JS | Check "Loop" checkbox | | Width / Height | Match canvas res | N/A (auto-scales) | | Colour Key filter | None | None (remove if present) | | Hardware acceleration | Enabled by default | Enabled by default | | YUV Colour Space | N/A | Default |
---
TL;DR
[View AlertForge pricing and start generating transparent alerts →](/pricing)
AlertForge
The AlertForge team builds AI-powered stream alerts for Twitch, YouTube, and Kick — transparent WebM video that drops straight into OBS.
Ready to build?
Create your own AI stream alerts
Generate professional animated alerts with a single prompt. Exports transparent WebM — works in any OBS setup.