Time Overlay guide
Add a Time Overlay countdown to OBS Studio
OBS Studio composites transparent media well. Two reliable paths exist: WebM with alpha as a Media Source for streaming overlays, or a PNG sequence routed through an Image Slideshow Source for tight loops. Both preserve transparency from Time Overlay to the OBS canvas.
Recommended Time Overlay export: WebM (with alpha) for quick streaming overlays. PNG sequence when you want frame-accurate loops or maximum quality.
Step 01
Configure the timer
Open the Time Overlay generator, pick a duration that matches your scene break, choose a placement that does not clash with your webcam, and set the canvas to the resolution OBS is recording at.
Step 02
Export WebM with alpha
Choose 'WebM (with alpha)' from the export panel. The output is a VP8-encoded WebM with a transparent background. OBS reads it directly as a Media Source.
Step 03
Add to your OBS scene
In OBS, add a Media Source, browse to the downloaded .webm, and enable 'Loop'. Resize the source so the timer reads at the right size on your canvas without covering your camera.
Step 04
Test with a local recording
Hit Start Recording in OBS for 10 seconds. Open the recording in VLC or a video editor and confirm the background remains transparent over your base scene.
Time Overlay tips
On older OBS builds (pre 28.x) where WebM Media Source playback is inconsistent, export a PNG sequence instead and load it through an Image Slideshow Source. The transparency outcome is the same; the CPU profile shifts toward image decoding.