How to use obscountdown timer in OBS Studio | Obscountdown.com

Tutorial how to use obscountdown countdown timer through browser source in OBS Studio or Streamlabs


Countdown url parameters explained

Parameter Default value Description
&countdown_directiononIf it's turned on on, Seconds will be decremented by the system. If it's not in the url, the system will increment the seconds.
&hours_count24How many hours to count down from
&minutes_count0How many minutes to count down from
&seconds_count0How many seconds to count down from
&show_hoursonHours digits and labels will appear in the countdown if it is turned on; otherwise, if it is missing from the url, the system will hide hours and their associated labels.
&show_minutesonMinutes digits and labels will appear in the countdown if it is turned on; otherwise, if it is missing from the url, the system will hide minutes and their associated labels.
&show_secondsonSeconds digits and labels will appear in the countdown if it is turned on; otherwise, if it is missing from the url, the system will hide seconds and their associated labels.
&top_titleYour+countdown+previewTitle that shows above the countdown, can be left blank
&top_title_size6 / BigTop title font size in rem "Root element's font-size"
&end_titleYour+ending+textTitle that shows when countdown reaches 0, can be left blank
&hours_labelHoursHours label chose to make it editable so that it may be used in any language.
&minutes_labelMinutesMinutes label chose to make it editable so that it may be used in any language.
&seconds_labelSecondsSeconds label chose to make it editable so that it may be used in any language.
&font_familyABeeZeeEvery Google font may be used
&font_weight400 RegularAuto complete for specific fonts to have them working properly
&digit_animationnoneAnimation when any of the digits changes it's value
&top_title_color#000000Text color for title above the countdown
&end_title_color#000000Text color for ending title
&digits_color#000000Text color for countdown digits
&labels_color#000000Text color for countdown labels

How to use a countdown timer in OBS Studio or Streamlabs


How to use in OBS Step 1
Step. 1

Click on the url box to copy the url to your clipboard

How to use in OBS Step 2
Step. 2

Open your streaming software, in this example I'm using OBS. Move to your sources panel after starting the app and establish a new source for your preferred scene.

How to use in OBS Step 3
Step. 3

From the sources list, make sure you select the Browser source.

How to use in OBS Step 4
Step. 4

Give the newly created source a name; I recommend using a name that corresponds to the scope of this countdown, such as a be right back page or a going live shortly page.

How to use in OBS Step 5
Step. 5

Paste the copied URL into the desired URL entry in the source settings window. Because we will subsequently resize it to fit the spot where we want to insert the countdown, choose a window size of 1920x1080px.

How to use in OBS Step 6
Step. 6

Now, if we followed all of the preceding procedures correctly, we must see the countdown. I'll have to resize it to fit where we want to put it. We can resize the window by dragging the left or right corner till it fits the space.

How to use in OBS Step 7
Step. 7

If you're using an animation that takes a lot of space, I wouldn't recommend cropping the window; however, if you want to save some space, holding down the ALT key and dragging the window's borders will crop the window.

How to interact with OBS browser source?


You can read this post about working with browser sources in OBS Studio and Streamlabs; it provides a brief explanation of how to use the browser sources correctly along with graphics and examples.

Complete guide how to use obs browser source
How to interact with OBS browser source step 1
Step. 1

To open the interaction window, right-click on the source in the sources dock and select interact.

How to interact with OBS browser source step 2
Step. 2

You can engage with the interaction window as if it were a standard web browser after it is open and selected/focused. Before pressing any hotkey, make sure the interaction window is selected/focused.