Add a clock to an OBS scene with a Browser source: load a local HTML clock file or, optionally, a hosted overlay URL, then size and position it in the canvas. A visible clock is only an overlay; it does not keep OBS, your computer, or the YouTube broadcast running continuously.
Use a local HTML clock in OBS
OBS Browser Source can display either a local webpage or a URL. A local HTML clock is a direct way to put the date and time over your video without relying on a hosted overlay. OBS’s Browser Source page describes it as “one of the most versatile sources available in OBS.” (OBS Browser Source documentation, dated 2022-01-11.)
| # | Preview | Product | Price | |
|---|---|---|---|---|
| 1 |
|
Sehawei N4 Pro Macro Pad, 10-Key LCD Shortcut Keyboard | $95.99 | Buy on Amazon |
As an Amazon Associate I earn from qualifying purchases.
- Get a clock HTML file. The OBS forum resource Time and Date Overlay updated describes downloading a clock HTML file and opening it as a local file in OBS. Alternatively, use an equivalent local HTML clock page from a source you trust.
- Choose the scene. In OBS, select the scene where the clock should appear. Under Sources, click + and choose Browser. Create a new source, name it clearly (for example, “Clock”), and confirm.
- Load the file. In the Browser Source properties, enable Local file and browse to the clock HTML file. Set the viewport width and height large enough for the clock and any background. The source’s viewport dimensions affect what the browser page can display; you can adjust them later.
- Place it on the canvas. Click OK, then move the source in the preview to the desired corner or other position. Drag its handles to resize it, or use the source’s transform controls for more precise placement. Check that the clock is not hidden behind another source or clipped by the canvas edge.
- Check the actual display. Confirm that the date, time, time zone, text size, contrast, and placement are right in the active scene before going live. If the time appears wrong, first check the computer’s system clock and time zone; a clock page that uses the browser’s local time will reflect those settings.
Change appearance and date/time format
The cited HTML resource says its CSS can be edited in a text editor to change the font, size, alignment, color, rounded corners, padding, and background. Its default format uses day/month/year and a 24-hour clock with seconds; the resource also gives a month/day/year-style alternative and refers to Moment.js formatting tokens. Follow the file’s own instructions when editing its format string, since date-format tokens depend on the clock implementation.
Free tools Windows power users keep installed
One-click scans. No signup required.
OBS’s Browser Source page documents CSS and viewport settings. Its documented default CSS makes the page background transparent and removes body margins and scrollbars, but the clock file may define its own background and spacing. If you want a solid panel behind the time, configure that in the file’s CSS; if you want text over the video, use a transparent background and ensure the text remains legible against changing footage.
#1 Best Overall
- ONE-TOUCH MACRO & CUSTOM HOTKEYS: Eliminate repetitive tasks instantly. Launch apps, files, system commands, or input text/GIFs with a single press. Create multi-step workflows (e.g., stream setup, editing shortcuts) without coding.
- 10 LCD KEYS & 4 SMART KNOBS: Fully customizable with GIF-supported icons. Features 10 LCD keys, 4 RGB backlit knobs (with touch displays), and an editable TouchBar per scene for unlimited layout and dynamic visual control.
- 500+ PLUGIN ECOSYSTEM: Seamlessly integrate with OBS, Discord, Spotify, and more. Includes utilities like clock, weather, and calendar for all productivity and streaming needs.
- PREMIUM BUILD WITH DESKTOP HUB: Carbon-fiber-like overlay with toggleable key haptics. Built-in 2× USB 3.0 + 1× USB-C non-powered hub for style and practicality.
- ERGONOMIC & PLUG-AND-PLAY: Includes an adjustable stand for optimal viewing. Cross-platform support for Windows 10+ and macOS 11.0+ via USB-C for instant setup.
Keep the source updating when scenes change
OBS offers a Shutdown source when not visible option that unloads a Browser Source when it is hidden or outside the active scene. For a clock that should visibly keep updating, leave it active in the live scene. If it is hidden between scenes, test whether refreshing the source when the scene activates produces the behavior you want. OBS lists shutdown and refresh options, but does not guarantee clock timing across a 24/7 broadcast.
Optional: use a hosted overlay URL
If you already build overlays in StreamElements, its documented workflow is to copy an overlay URL, add a Browser source in OBS, paste the URL, and set the source dimensions (StreamElements: adding an overlay to OBS Studio). The guide uses 1920 × 1080 as a usual example and suggests 30 or 60 FPS depending on stream settings and computer capability; those are examples, not requirements for a small clock. Use a viewport that fits the overlay you intend to show.
StreamElements documents custom widgets, but the available documentation does not establish that it provides a ready-made clock widget (StreamElements custom widgets documentation). Do not assume a clock is included: check the overlay editor or build a widget if needed. Treat the overlay URL as private; StreamElements warns that overlay tokens are sensitive.
Which method should you choose?
| Consideration | Local HTML clock | Hosted overlay |
|---|---|---|
| Where the page comes from | A file on the computer running OBS. | A remotely hosted overlay loaded by URL. |
| Useful when | You want a direct file-based clock and control over its CSS and date/time format. | You already use an overlay editor or need a remotely hosted overlay workflow. |
| Private URL concern | No hosted overlay URL is required. | Keep the overlay URL private because it can contain a sensitive token. |
| Clock-specific availability | The cited OBS forum resource documents a downloadable clock HTML file. | A ready-made StreamElements clock widget is not established by the cited documentation. |
The sources do not establish a reliability advantage for either approach. In either case, size the Browser Source for the visual area you need and verify the result in OBS.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.A clock overlay does not make a stream 24/7
The clock is a visual layer. It does not prevent the computer from sleeping, keep OBS open, maintain an internet connection, or restore a YouTube broadcast if it disconnects. YouTube’s encoder help lists OBS among software encoders and says enabling live streaming for the first time may take up to 24 hours; that timing concerns initial live-stream enablement, not clock setup or continuous uptime (YouTube Help: live streaming with an encoder).
Or let it run in the cloud
If you want a pre-recorded video to keep looping on YouTube without leaving a computer running at home, StreamNeo is a cloud service for that workflow. Upload a recording or build a playlist, add your YouTube stream key, and go live; it loops the uploaded video from the cloud. It does not stream from a camera, and it streams to YouTube only. The clock-overlay steps above are for OBS; StreamNeo keeps uploaded video live but does not replace the OBS clock instructions.
- Nothing has to stay on at home for the cloud stream to continue.
- Any quality up to 4K 60fps streams as uploaded at one flat price per slot, with no re-encode or quality tiers.
- Automatic recovery is included if YouTube drops the stream.
- The first day is free with no card, once per account.
The monthly plan is $9.99 per month. Start your free first day on StreamNeo.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchQuick Recap
Troubleshooting the clock
- The clock is missing. Confirm that the Browser source is in the selected scene, its visibility icon is enabled, and it is not behind an opaque source. Recheck the Local file path if you moved or renamed the HTML file.
- The text is cut off. Increase the Browser Source viewport width or height, then reposition or resize the source in the preview. If the file has CSS padding or a background, allow room for those too.
- The text is hard to read. Edit the file’s CSS to adjust font size and color, alignment, padding, or background. Check legibility against the actual footage, not just a static preview.
- The displayed time or date is unexpected. Check the computer’s clock and time zone, then verify the format string used by the HTML file. The cited resource’s default is day/month/year with 24-hour time and seconds; formatting tokens can vary by implementation.
- The clock stops or appears stale after hiding the scene. Check whether Shutdown source when not visible is enabled. Test the refresh behavior on scene activation; OBS’s documentation does not promise clock continuity through hidden periods.
- A hosted overlay does not load. Confirm the URL is correct and the computer has a working connection. Because overlay URLs can include sensitive tokens, avoid sharing them while troubleshooting.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
