Add a clock to an OBS scene with a Browser source that loads a local HTML clock page. Choose the file, set its viewport dimensions, position it on the canvas, and check the time and styling before going live. A hosted overlay URL is another option, but neither method by itself keeps a broadcast online continuously.
Use a local HTML clock in OBS
OBS Browser Source can load a local webpage or a URL and render it as a scene layer. For a clock that does not need an overlay-hosting account, use a local HTML file.
| # | Preview | Product | Price | |
|---|---|---|---|---|
| 1 |
|
Sehawei N4 Pro Macro Pad, 10-Key LCD Shortcut Keyboard | $95.99 | Buy on Amazon |
- Get a clock HTML file. The OBS forum resource Time and Date Overlay updated describes downloading a clock HTML file. Check that you trust the file before opening it. Alternatively, use an equivalent local HTML clock page.
- Add the source. In OBS, select the scene where the clock should appear. In the Sources panel, click + and choose Browser; give the source a recognizable name.
- Load the local file. In the Browser Source properties, enable Local file and browse to the clock HTML file. Set the source width and height large enough for the text and any background. Click OK.
- Place and size it. Use the scene preview to move the clock where it belongs. Resize the source to fit the canvas without covering important video content. If text is clipped, increase the viewport dimensions or adjust the file’s styling.
- Check it before broadcasting. Confirm the clock updates and displays the intended local time, date format, contrast, and placement in the active scene.
Adjust the display and time format
The cited clock resource identifies editable CSS settings for font, size, alignment, color, rounded corners, padding, and background. Its default format uses day/month/year and 24-hour time with seconds; the resource also gives an alternate month/day/year-style example and refers to Moment.js formatting tokens. Open the HTML in a text editor and change its CSS or format string as needed, then reload the source in OBS to inspect the result.
Keep the source active when it needs to update
OBS documents Shutdown source when not visible as an option that unloads a Browser Source when hidden or outside the active scene. For a clock that must continue updating while visible, leave it active in the live scene. If it is hidden between scenes, test whether refreshing it when the scene becomes active gives the expected display. The documentation describes shutdown and refresh options but does not guarantee clock timing across a continuous broadcast.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#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.
Use a hosted overlay URL instead
If you already build overlays in StreamElements, you can add its hosted overlay as a Browser source. This approach loads a remote page rather than a local file. The documentation covers custom widgets, but does not establish that StreamElements provides a ready-made clock widget.
- Copy the overlay URL from the overlay editor.
- In OBS, add a Browser source to the scene.
- Paste the overlay URL into the source properties and set dimensions to fit the overlay. StreamElements gives 1920 × 1080 as a usual example, not a required size for a clock.
- Choose a custom frame rate if needed. StreamElements suggests 30 or 60 FPS depending on stream settings and computer capability; a small clock may not need a full-canvas viewport.
- Preview the result and adjust placement and dimensions in the scene.
Keep the overlay URL private: StreamElements warns that overlay tokens are sensitive. For the documented workflows, see StreamElements’ OBS overlay instructions and its current documentation.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.What the clock does—and does not—do for a 24/7 stream
A clock is a visual source in an OBS scene; it does not manage stream uptime. Keeping an OBS broadcast live still depends on the computer, power, network, encoder, and YouTube accepting the stream. YouTube Help lists OBS among software encoders and says enabling live streaming for the first time may take up to 24 hours. That period concerns initial live-stream enablement, not clock setup or continuous uptime. See YouTube’s encoder streaming help.
Or let it run in the cloud
If your 24/7 YouTube stream plays uploaded video rather than a live camera, StreamNeo is a cloud alternative: upload a recording or build a playlist, add your YouTube stream key once, and go live. It loops the uploaded video without requiring your computer or home connection to stay on. The clock setup above is for OBS; StreamNeo’s described service is for uploaded videos, not camera feeds.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Quick Recap
- Nothing has to stay on at home; StreamNeo runs the stream from the cloud and can automatically recover if YouTube drops the stream.
- Each slot is one flat price for any uploaded quality up to 4K 60fps, with no re-encode or quality tiers.
- The first day is free with no card, one free day per account.
- Monthly: $9.99 per month.
See StreamNeo or start the free first day.
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.
