Back to the guides

Putting a timer overlay in OBS that you control from your phone

You put up a "Starting in 5 minutes" screen, the start slips, and there is no way to fix the number. While you rebuild the overlay or switch scenes, chat fills up with "when does it start?". Here is how to add one browser source and change the number from your phone.

When an overlay timer gets in the way

There are plenty of countdowns for streaming and recording. The problem is that most of them only live inside the screen.

• If the start slips, someone has to sit at OBS and open the source settings to change the number
• When the host is on stage or in front of the camera, they can't touch OBS. The person who controls the timer and the person who knows the time are different people
• The green room, guests and moderators aren't watching the program output. They need the same number on their own screens
• With several segments (opening, main, break, Q&A) you end up with several sources

TimerRoom's OBS screen is a web page with nothing but the digits on a transparent background. Paste one address into a browser source and it sits on top of your video. Start, pause, extend and switch happen on the host screen, on a phone or a laptop. Give the participant link of the same room to guests and crew and they see the same number.

Five minutes of setup

1. Create a room. On the front page, pick the type, length and name. The name becomes the label. For example "Starting in", "Break", "Q&A".
2. Save the host link. It is the only way to control the timer. Keep it on your phone so you don't need to be at the OBS machine.
3. Copy the OBS link. On the host screen, open the OBS help inside the invite section and press "Copy OBS link". It looks like https://…/obs/ROOMCODE. It is view-only, so it is safe even if it shows up on stream.
4. Add a browser source in OBS. Steps below.
5. Press Start on your phone and watch the digits move on the program output.

Setting up the OBS browser source

1. In your scene, Add source (+) → Browser and name it (for example Timer).
2. Paste the OBS link into URL.
3. Set Width and Height to the space the overlay should take. The digits scale to the width of the source on their own. For a lower-third slot start around 800×200; for a big centered countdown around 1200×400, then adjust.
4. Leave Custom CSS empty. The background is already transparent.
5. "Shutdown source when not visible" can be on or off. On, the source reconnects when the scene becomes active and may show --:-- for a moment. Off, it stays connected behind other scenes. Off is the safer choice.
6. Move the source where you want it. You can resize with OBS transforms, but for crisp digits it is better to make the source itself larger.

Streamlabs, vMix and anything else that accepts a browser (web) source works the same way.

Things you change by adding to the address

The default is white digits with a black outline, chosen to stay readable over both bright and dark scenes. To change it, add ? after the address and join values with &.

Example: https://…/obs/8KF2M7QX?color=ffd166&size=120&align=right&label=1

When the color clashes with the video. Over red stage lighting or a sports feed, the default end color disappears. Pick something different from the background, such as end=ffd166. Any default dies over a background of the same color, so the fastest way is to check once on the real scene. The outline keeps the shape of the digits, so even a poor color still reads.

When you want no outline. On a dark, flat background outline=0 looks cleaner. If you plan to cut to bright scenes, keep it on.

When you want a different font. The overlay uses the Barlow digit face. If you must change it, OBS's Custom CSS can take .num{font-family:"Your font"}. Digit widths will change, so you will need to reposition, and the class name may change in a future update.

During the stream

When the start slips. Press +1 min on the host screen on your phone. Hold it for 5-minute steps. The program output and the guests' phones grow together. You never touch the source.

After zero. The digits don't stop. They keep showing the overtime as +00:15. Only the color changes to the end color and nothing blinks. A viewer who joins a little late can tell it just ended. No sound plays on the OBS screen. For sound, open the participant link on a phone and enable the end sound there. The host control screen has no end-sound enable button.

Several segments. Create several timers in one room (up to 20). Tap a row in the timer list on the host screen and the overlay switches to it. One source is enough. Switching does not stop the previous timer.

Starting at a fixed time. Make the timer type "Until a time" and it counts down to that clock time. Good for a scheduled start.

Timing the whole stream. A stopwatch shows elapsed time. With label=1 it reads "Elapsed".

Messages don't appear. Host messages show on participant screens only. The OBS screen is digits only, so no notices get mixed into the broadcast.

Common problems

Only --:-- shows. It hasn't connected yet, or there is no room at that address. Check the 8-character room code. A room disappears 24 hours after the host's last action (or 2 hours after the furthest end time), so yesterday's source can be empty today. Create the room on the day and paste the link again.

The digits went dim. The connection dropped. The overlay can't change color because it doesn't know the background, so it lowers opacity instead. The digits keep counting on that computer's clock and catch up on their own when the connection returns. Only the host's latest actions arrive late.

The digits are cut off. They are wider than the source. If you set size=, lower it; otherwise widen the source. Timers over an hour gain a digit, like 1:02:30, so size the source for that.

Guests need to see it too. Give them the participant link (/t/ROOMCODE) or the QR code. The same number appears on their phone, and a double-tap goes full screen. Don't give them the host link.

Several people want to control it. Sharing the host link works but isn't recommended. Two people pausing and extending at once makes the output jump. One person controls, everyone else watches through the participant link.

What this overlay does not do

No progress bar, no animation, no font picker, no logo slot. Digits plus color, size, alignment and a label. If you need broadcast graphics tuned to the pixel, a dedicated tool is the right choice. This overlay is for when you need one number that you can change from your phone.

Checklist

• Created the room on the day of the stream
• Host link is on my phone; what's in OBS is the OBS link
• The browser source is wide enough for the longest number (1:02:30)
• Checked the color over the real scene and changed color= or end= if it clashed
• Created a timer for each segment ahead of time
• Sent the participant link to guests and crew
• Pressed Start on the phone and watched the program output move

← Explore more guides