To add a clock overlay in OBS, load a local HTML clock page as a Browser Source, size it to fit the scene, and place it over your video. Before going live, check that the displayed time, format, contrast and position are right in the scene you will use.
A clock is only a visual layer. It does not keep a broadcast online or guarantee that the displayed time remains accurate under every system-clock condition. This guide covers the overlay itself and the practical checks that help it stay readable during a long stream.
Choose a clock overlay method
For a simple clock that you control yourself, a local HTML page is a practical starting point. OBS Browser Source can display a local webpage or a URL, so the page can sit above a video or background as a separate scene source. You can adjust its text and styling in the HTML and use the OBS preview to place it. See the OBS Browser Source documentation for the available source properties.
A hosted overlay is another route if you already use an overlay editor. StreamElements documents adding an overlay URL as a Browser Source in OBS. That workflow can suit a channel with several graphics managed together, but it means the clock page is hosted rather than a file on your computer. StreamElements’ instructions for adding overlays to OBS explain that URL-based route. They do not establish that a particular ready-made clock widget is available, so check the editor itself before planning around one.
| Method | Where the clock page lives | Useful when | Check before choosing |
|---|---|---|---|
| Local HTML Browser Source | On the computer running OBS | You want a small, directly editable clock and can manage a file | Confirm the file opens in OBS and its text fits the viewport |
| Hosted Browser Source | At a URL supplied by an overlay service | You already manage graphics in an overlay editor | Keep private overlay URLs private, and consider what happens if the page is unavailable |
The available evidence describes both workflows, but does not establish that one is more reliable. Choose based on how you want to edit the clock and where you prefer it to live, not on an assumed uptime advantage. Either way, test the actual scene on the machine that will run OBS.
If your channel is a continuous playlist, keep the clock task separate from the playback setup. A guide to scheduling a YouTube livestream playlist with Streamlabs Desktop addresses a different part of the workflow; the clock is a visual element layered into the scene, not a scheduling control.
Prepare a local HTML clock page
You can use a trusted clock HTML file or make an equivalent page yourself. The OBS forum resource Time and Date Overlay updated describes a downloadable local-file workflow and points out that the file can be edited with a text editor. Treat that as instructions from the resource author, not a tested or endorsed OBS template. Inspect a downloaded file before using it, and avoid changing code you do not understand.
A local page is useful because its appearance can be changed independently of your video. The forum resource identifies CSS settings for properties such as font, size, alignment, colour, rounded corners, padding and background. Make one change at a time, save the file, and refresh or reload the source in OBS to see the result. Keep a copy of the original so you can restore it if an edit breaks the display.
Decide what information the clock should show before styling it. A time-only display takes less room than a date and time together. If viewers may arrive in another time zone, label the zone clearly rather than letting them infer it. A devotional stream serving viewers across India, for example, might use Indian local time and a date format that its audience recognises. If your audience is international, state which time zone the display represents.
The cited resource’s default format uses day/month/year and 24-hour time with seconds; its author also gives an alternate month/day/year-style example and refers to Moment.js formatting tokens. These are examples from that resource, not a requirement for your own page. Check the format string against the clock page you choose: date-format tokens vary between libraries, and copying a token from another implementation may produce unexpected text.
Keep the page simple. A single line of text is easier to fit than a decorative panel with a label, date and seconds all competing for space. If you do want a panel, decide whether it needs a background or can sit directly over the video. Save the file somewhere stable rather than in a temporary download folder, so OBS can find it after a restart or a later tidy-up.
Add an OBS Browser Source
Open the scene that should show the clock, then add a new Browser source from the Sources panel. Give it a recognisable name such as “Clock” so you can distinguish it from other browser overlays later. In the source properties, enable Local file and browse to the HTML file. OBS’s documentation lists local webpages as a supported Browser Source input.
Set the viewport width and height in the Browser Source properties. These values describe the browser area in which the page is drawn; they are not necessarily the final size on the canvas, because you can also resize and position the source in the scene. Start with enough space for the full text and any background or padding your page uses. If the viewport cuts off a character or causes a second line, correct the dimensions before refining placement.
After applying the properties, look at the scene preview. If the source appears blank, confirm that Local file is selected and that the path points to the intended file. Check the HTML file in a browser separately if needed, then return to OBS and refresh the source. If you have edited the file while OBS is open, reload it so the preview is showing the saved version.
A local source avoids depending on a hosted page for the overlay, but it still depends on the local file being present and readable by OBS. Keep it with the other scene assets or document its location for whoever maintains the channel. This is particularly useful if another person might need to recover the scene after a computer restart.
Set the viewport dimensions and placement
The right viewport depends on the content and design of the clock, not on a universal preset. A compact time-only display may need only a narrow, shallow area; a date, time and label need more room. Set the viewport large enough to show every character at the chosen font size, then use the scene preview to position the source in the composition.
Avoid making the Browser Source enormous merely because the video canvas is large. A clock placed in one corner does not need a full-canvas viewport unless the HTML page itself is designed around the full canvas. A small, purpose-sized viewport is easier to reason about, especially when checking whether the source overlaps a title, a devotional image, subtitles or other channel branding.
In OBS, move the source by dragging it in the preview and adjust its scale using the source’s transform handles or transform controls. Keep it inside the canvas and leave a margin from the edges. A clock pressed against the border can look cramped, and a source that extends beyond the canvas can make part of the display invisible. Check the composition at the output size viewers will see, rather than judging from a close-up editor view alone.
If you use multiple scenes, position the clock separately in each scene where it is needed. A source visible in one scene is not automatically visible in another unless you use a shared source or add it there as well. A continuous music or Punjabi radio-style YouTube stream might have a main playback scene and a holding scene; verify the overlay in both if both can be used during the broadcast.
For a hosted overlay, StreamElements gives 1920 by 1080 as a usual example for overlay dimensions and suggests choosing 30 or 60 FPS depending on stream settings and computer capability. Those are examples for an overlay workflow, not required clock settings. A clock that changes once per second may not need the same canvas or frame-rate choices as an animated graphic. Use the dimensions your page needs, and keep the private overlay URL confidential: StreamElements warns that overlay tokens are sensitive.
Check transparency and legibility
OBS’s Browser Source documentation describes default CSS that makes the browser page background transparent and removes body margins and scrollbars. That lets a local HTML page render as a layer rather than as a solid webpage rectangle, provided the page’s own styling does not paint an opaque background. If your clock sits inside a coloured panel, that panel is coming from the page’s CSS, not from a required OBS clock setting.
Test the clock over the actual footage or background. White text may be clear over a dark wall but disappear over a bright sky; black text may do the opposite. Choose a colour and, if needed, a backing panel that stays distinguishable across the visual material in your loop. For a video that changes from dark night scenes to bright daylight scenes, check both kinds of frames rather than finding a colour that works only on one still image.
Size is a balance. Tiny text can be unobtrusive in the OBS editor yet unreadable on a phone. Very large text can cover the subject or compete with the channel’s main message. Use a short test recording or preview at the intended output resolution, then view it at a smaller playback size. Ask whether a viewer can read the time without pausing and whether it remains secondary to the programme.
Check that the date and time do not wrap onto awkward lines. If they do, widen the viewport, reduce padding, shorten the format or increase the font size only after making room for it. A seconds display changes more often, but can add visual movement; consider whether your viewers need it. For a prayer timetable or a local news loop, the date may matter more than seconds. Choose the content for the channel’s purpose.
Preview the clock in the scene
Before going live, inspect the clock in the scene that will actually be broadcast. Confirm that the time shown matches the intended local time, that the date format is unambiguous, and that the time-zone label is present if viewers could mistake the zone. Do not assume the computer’s displayed time is correct merely because the page renders: compare it with a trusted time source and check the operating system’s date, time and time-zone settings.
Also check the scene at its normal playback scale. The OBS preview is useful for placement, but it is not a substitute for seeing how the output looks to a viewer. If possible, make a brief local recording and review it on a phone or another small screen. Confirm that text is not hidden behind a logo, cut off at the canvas edge, or lost against footage as the video changes.
Check the source list and scene visibility before starting the broadcast. The clock should be above the video source in the scene’s layer order, otherwise the video can cover it. If a logo, ticker or alert also occupies the corner, decide which element should take priority and reposition one of them. Keep a note of the final placement and the file path, particularly if someone else may need to reopen the project.
The clock has no bearing on whether YouTube accepts the stream or whether the live broadcast continues without interruption. YouTube’s encoder streaming help covers encoder-based streaming and includes OBS among software encoders. It also notes that enabling live streaming for the first time may take up to 24 hours; that is about initial live-stream enablement, not clock setup or continuous uptime.
A visible time display may help people orient themselves, but a clock does not make a loop more suitable for every audience or resolve rights questions about its audio and video. If your channel uses recorded material, treat the copyright considerations for a 24/7 YouTube stream of Indian film songs and karaoke tracks as a separate issue to check through current official guidance. Overlay configuration is not a substitute for that work.
Verify behaviour during a long stream
A 24/7 channel needs a clock that is present in the right scenes and visible to viewers, but the overlay itself cannot guarantee uninterrupted streaming. Keep the OBS computer’s power, network connection, scene transitions and broadcast monitoring in your usual long-run checks. If a stream drops frames or the encoder is overloaded, diagnose that separately; changing the clock’s placement is not a remedy for an encoding problem.
OBS Browser Source properties include options to shut down a source when it is not visible and to refresh it. OBS documents Shutdown source when not visible as unloading the source when it is hidden or outside the active scene. If the clock is meant to be present throughout a broadcast, leave it active in the live scene. If your production hides it between scenes, test what happens when the scene returns and whether refreshing on activation gives the result you want.
Do not treat a ticking display as proof that the underlying time is correct. Its behaviour depends on the page and the system clock it is using; the documentation reviewed does not promise time accuracy under all system-clock conditions or guarantee timing across a day-long broadcast. Compare the displayed time with a trusted reference before the stream and check it periodically as part of your own monitoring routine. If the stream runs from a computer that may be unattended, make sure someone knows how to inspect the scene and correct the system time if it drifts.
A long-running channel benefits from a simple recovery note: record which scene contains the clock, where the HTML file lives, how to refresh the source, and what local time zone it should show. If the file is moved, the source path may need updating. If you use a hosted overlay instead, verify that the URL is still available and keep any access token private. These are maintenance checks, not promises about uptime.
If the clock is one of several sources in a continuous OBS setup, monitor the whole stream rather than using the overlay as a health indicator. A guide to OBS playlist sources for continuous YouTube streaming covers playback configuration; a clock can coexist with that scene, but it cannot confirm that the playlist, encoder or connection is functioning as intended.
Before committing, compare the operating options on the pricing page. When the file and channel are ready, start free — 24-hour trial, no card.
FAQ
Does OBS have a built-in clock overlay?
The documented approach here is to use a Browser Source with a local HTML page or a hosted URL. This guide does not assume a built-in OBS clock feature. The page provides the clock display, while OBS places it in the scene.
Why is my local HTML clock showing a solid background?
The page may set its own background colour even though OBS Browser Source’s default CSS uses a transparent page background. Inspect the HTML and its CSS, then check the scene preview after reloading the source. A deliberate panel can improve contrast, but it should not cover more of the video than needed.
Will the clock stay accurate throughout a 24/7 stream?
No overlay setup can be described here as accurate under every system-clock condition. Check the computer’s date, time and time zone against a trusted reference before going live, and include time checks in your monitoring routine. A visible clock does not guarantee broadcast uptime.
Can I use a hosted overlay instead of a local file?
Yes. OBS Browser Source can load a URL, and StreamElements documents a workflow for adding an overlay URL. Consider the hosted page’s availability and keep private overlay URLs or tokens confidential; verify the clock’s actual formatting and display before relying on it.