To add a clock and ticker to an OBS 24/7 YouTube stream, create a Browser Source in the scene, point it to a local HTML page or hosted overlay URL, set its width and height, then position it over your video. The clock and ticker come from that page; OBS displays the page as a source.
The practical choice is whether to keep the page on the computer running OBS or load it from a provider’s URL. Either way, check the clock’s time zone, ticker content and visibility in a test broadcast before leaving the channel unattended. The setup controls below follow OBS’s documented Browser Source behaviour rather than assuming that any particular overlay service is required.
Create or choose a clock-and-ticker page
OBS describes Browser Source as a web browser you can add directly to a scene. It can display a local page or a URL, which gives you the basic route for putting a clock and ticker on screen. OBS supplies the display container; the HTML page or hosted service supplies the clock, text and styling. OBS’s Browser Source documentation explains the available source controls.
You can write or obtain a small HTML page if you or someone helping you is comfortable with web basics. Alternatively, choose a hosted overlay that provides a URL. Before settling on either, confirm that the page actually offers the controls you need: a clock format, a time-zone choice or clear time-zone behaviour, editable ticker text, and styling that remains readable against your background. Do not infer these features from a product name or screenshot; check the provider’s own documentation and try the exact page you intend to use.
For a devotional stream, for example, the clock might sit in a quiet corner while a ticker carries the current programme name. A local news loop may need a more prominent ticker and a clock that viewers can read at a glance. In both cases, plan the design against the video beneath it. A pale ticker over a bright scene can disappear, while a large opaque panel can cover the content viewers came to see.
A local page can work without relying on an overlay host being reachable, but the page itself and its resources still need to be present on the machine where OBS runs. A hosted page is easier to edit from elsewhere if its provider supports that workflow, but it depends on that page being available and behaving as expected. Compare where you will edit the ticker, whether the overlay needs an internet connection, what time-zone controls are documented and what happens when the page refreshes.
A vendor-specific example is CamStreamer’s Infoticker, which documents a clock and banner for a particular AXIS camera and CamStreamer/CamOverlay app setup. That is an adjacent camera-oriented option, not a required OBS plugin or a general Browser Source prerequisite. If your setup is an ordinary OBS scene, start with a webpage and OBS’s documented source rather than buying into a camera ecosystem you do not use. CamStreamer’s product guide describes its own requirements and controls.
If the ticker will show lyrics, keep its purpose distinct from a full lyrics display: a crawl can carry a short line or announcement, but it may be hard to follow for longer text. For a fuller treatment of readable on-screen words, see this guide to showing bhajan lyrics on a 24/7 live stream.
Add a Browser Source in OBS
Open the OBS scene that will carry the overlay. In the Sources panel, use the add control and choose Browser. Give the source a recognisable name, such as “Clock and ticker”, so it is easy to find later among media, image and capture sources. Source names are especially useful when a scene has several layers or when somebody else may need to make a change during a long-running broadcast.
The Browser Source properties include a place to choose a local file or enter a URL, along with width and height fields. A newly created source may use OBS’s documented default dimensions of 800 by 600 pixels, which are not necessarily appropriate for your stream canvas or for a narrow ticker. Choose dimensions deliberately rather than assuming the source will automatically fit the scene.
A Browser Source is a page rendered inside OBS, not a separate window that you arrange on the desktop. That matters for a 24/7 scene: once set up, the source sits in the scene stack like other visual sources. You can put it above the background video and below another element if that suits the composition. If it appears behind an opaque image or video layer, it may be present but hidden, so check the ordering as well as the source properties.
Create the source in the scene that is actually used for the continuous broadcast, rather than only in a setup or preview scene. If you run multiple scenes, decide whether each one needs the overlay. A source that exists in one scene does not automatically become visible in another unless your scene arrangement makes it so. For a related discussion of keeping OBS and the broadcast machine running, see what happens when you shut down the computer running OBS.
Load a local page or hosted URL
For a local HTML page, enable Local file in the Browser Source properties and browse to the page. The file needs to be accessible to the machine running OBS. If the page refers to other files such as stylesheets, images or scripts, keep those paths intact when moving the page; a working HTML file can still show incorrectly if a referenced asset is missing. Reopen the source after moving files and inspect the result in the preview.
For a hosted overlay, leave Local file disabled and enter the URL supplied by the page or service. Use the actual overlay page address, not a general marketing page or account dashboard. If the provider requires a generated URL or a token in that address, treat it carefully: it may give access to the layout or controls. Do not show private access details in a public screen capture.
These two routes differ in where the page is maintained, not in OBS’s basic job. With a local page, you control or store the HTML near the OBS setup; a hosted URL means the overlay depends on the remote page loading. On either route, check whether the ticker text is fixed in the page, edited in a control panel, or fetched from somewhere else. A ticker that cannot be conveniently updated may be the wrong fit for a stream that changes announcements often.
Also check how the page gets its time. OBS renders the page, but it does not validate that the displayed clock matches the time zone you intend. If the page has a time-zone setting, set it explicitly and compare the result with a trusted clock in that zone. If the provider does not explain its time behaviour, treat that uncertainty as a reason to test carefully rather than assuming the display follows your viewers’ local time.
If you plan to use OBS on a different machine or operating system later, check that the page and its dependencies still work there. OBS documents Browser Source availability through its official packages for Windows, macOS and Linux, but that does not guarantee that every third-party page or browser-dependent feature behaves identically on every system. Keep a copy of local assets and record any overlay settings that would be difficult to reconstruct.
Set the Browser Source width and height
Set the Browser Source width and height to match the layout the page is meant to render. These values define the browser viewport, not a promise that the graphic will fill the entire OBS canvas. If the page was designed as a full-canvas overlay, use the canvas dimensions for the viewport. If it was designed as a narrow ticker strip, use dimensions suited to that strip, then position and transform it in the scene as needed.
Think in terms of two rectangles: the page viewport and the visible content inside it. A page can have a large viewport with a small ticker aligned at the top, or a compact viewport that contains only the ticker. If the content is clipped, first check whether the viewport is too short or narrow and whether the page’s own layout has margins or fixed sizing. Enlarging the source in the scene may make text bigger, but it will not necessarily fix content that the page has already clipped inside its viewport.
OBS documents that Browser Source removes page margins and hides overflow scrollbars by default. It also supports custom CSS, which can be useful when adapting a page, but only change it if you know what the page expects. A margin reset or custom style can solve a layout mismatch; an arbitrary CSS change can also hide text or override the provider’s design. Keep a note of any custom CSS so you can reverse it during troubleshooting.
Here is a practical way to choose the viewport:
| Overlay design | Starting viewport approach | What to inspect |
|---|---|---|
| Full-canvas clock and ticker page | Match the OBS canvas dimensions | Whether the page places each element where you expect and whether transparent areas reveal the video |
| Narrow ticker strip | Use the intended strip dimensions, then place it in the scene | Whether text is clipped vertically and whether the crawl stays within the strip |
| Compact clock panel | Use the page’s intended panel proportions | Whether the digits remain legible after positioning and scaling |
The table is a layout guide, not a prescribed setting for every page. A provider may document a particular size for its overlay; follow its instructions, then verify the result in your own canvas. Where no size is documented, use the page’s design and the OBS canvas as references, and adjust based on what is actually visible in the preview.
Position and scale the overlay in the scene
Close or confirm the source properties and inspect the overlay on the OBS canvas. Select it in the preview to reveal its transform handles, then drag it into place. Keep the clock and ticker inside the part of the canvas that will reach the stream, and avoid covering faces, lyrics or other essential content. Leave enough separation from the edges that the display does not feel cramped.
Scaling changes the size of the source in the scene. It can help fit a page to the composition, but too much reduction can make the clock difficult to read and too much enlargement can crop content beyond the canvas. If text looks soft or is cut off, revisit the source’s viewport dimensions and the page layout before repeatedly dragging the handles. A larger viewport with a suitably designed page may produce a better result than stretching a small fixed layout.
Check the source order in the Sources list. A clock-and-ticker layer must be above the video or image it is meant to overlay. If another full-frame source sits above it, the browser page can be loaded correctly yet remain invisible. Similarly, if a source is hidden with its eye control, it will not appear in the output. These are simple scene issues, but they can be easy to miss when you are focused on the browser properties.
Use a representative background while positioning. A ticker tested over a dark static image may become unreadable when the loop switches to a bright daytime scene. For a channel that rotates between devotional artwork, video footage and title cards, inspect the overlay against each kind of content. If the colour contrast changes too much, choose a background panel or text treatment in the page where available, rather than relying on a single preview frame.
If you have a long-running OBS setup that you do not want to supervise beside the computer, a cloud-run broadcast can remove the specific burden of leaving that computer switched on. StreamNeo turns an uploaded video into a YouTube-only 24/7 stream, so that can help when the pain is keeping the local machine running; it does not replace the task of building and checking a clock-and-ticker page in an OBS scene.
Keep the overlay present through scene changes
A 24/7 channel may use one scene all day, or switch between scenes for a programme change, an announcement or a different visual. OBS’s Browser Source properties include Shutdown source when not visible, which unloads the page when it is hidden or outside the active scene. That can save resources, but it changes what happens when you return to a scene: the page may need to load again.
For an overlay that should remain visible, keep it in the active on-air scene and decide whether shutdown-on-hide suits your scene-switching pattern. If the clock and ticker appear in several scenes, ensure each relevant scene has the intended source arrangement. Test switching away and back, including the time it takes the hosted or local page to render again. Do not assume that a setting intended for a single static scene will behave identically in a rotating scene collection.
Refresh behaviour deserves the same practical check. A page may refresh on a schedule or respond to a provider control, but details depend on the page and OBS settings; do not assume a particular overlay refresh interval. A refresh that briefly blanks the page may be acceptable for a small ticker, but not if it repeatedly interrupts an important display. Observe the actual page through a scene change and a prolonged test before relying on it unattended.
For local pages, avoid changing filenames or folders after you have configured the source unless you update the path in OBS. For hosted pages, confirm that the URL still opens and that any account or access requirement is understood. Keep a simple record of the page location, viewport dimensions, relevant scene and any custom CSS. That makes recovery less dependent on memory if you need to rebuild the scene later.
Test the overlay before the long run
First inspect the OBS preview with the stream stopped. Confirm that the clock is visible, its time zone is right, the ticker text is correct, and nothing important is hidden behind it. Watch long enough to see whether the ticker moves or updates as intended. The page’s own controls determine those details, so compare them with the behaviour you observe rather than treating a settings label as proof.
Then run a private or otherwise appropriate test broadcast if your workflow allows it, and verify the result from YouTube’s side as well as from OBS. YouTube’s encoder guidance explicitly says to test before starting a live stream and to monitor stream health. See YouTube Help on encoder settings and stream testing. A page that looks right in the OBS preview should still be checked in the actual outgoing stream, where cropping, scaling or a wrong scene may become apparent.
The overlay itself does not determine the encoder bitrate. YouTube’s recommendations vary with resolution, frame rate and codec, so do not take a single setting from another channel and treat it as universal. If you are adjusting the output while adding a graphic, check the current YouTube guidance for the resolution and codec you use; the numbers there are streaming recommendations, not requirements for a clock or ticker. Avoid changing several unrelated settings at once, because that makes a failure harder to diagnose.
Test with the audio and movement that resemble the planned broadcast. Make sure the on-air scene is the one containing the overlay, that the text is readable on the final stream, and that the channel is not accidentally exposing setup screens or credentials. YouTube’s live streaming workflow guidance is the place to review current channel-side steps. Treat the stream key as a credential and keep it out of public captures.
For a channel that is already running, schedule overlay changes as carefully as content changes. Update the ticker text in a controlled window, check the result on the live output, and have a fallback scene or static graphic ready if the page stops displaying. This is particularly useful for local news, business announcements or devotional schedules where stale text is more noticeable than a brief absence of animation. A modest, accurate ticker is better than a complicated one you cannot verify.
If your broader workflow uses more than one broadcast at once, keep the graphics and scene changes separate in your planning; a correctly built overlay does not resolve platform or encoder limits. This guide to simultaneous YouTube live streams on an Indian channel covers a different constraint worth checking before you build a schedule around multiple outputs. For network-side planning in a home setup, this article on OBS and a 24/7 stream over JioFiber addresses the connection rather than the overlay.
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
Can I make a clock and ticker with OBS alone?
The documented route is to add a Browser Source that displays a page, either local or hosted. The page provides the clock and ticker; OBS provides the source controls, sizing and scene placement. Check the page’s own time-zone and ticker behaviour rather than assuming OBS supplies those features.
Should I use a local HTML file or a hosted overlay?
Use a local file if you want the page stored with the OBS setup and are comfortable maintaining its files. A hosted URL may make editing more convenient if the provider supports it, but depends on that page being reachable and loading properly. In either case, test the exact page and keep track of its location and settings.
Why is my Browser Source blank or cropped?
Check that the file path or URL is correct, the source is visible and above the background layer, and the width and height suit the page. A local page may be missing linked assets, while a hosted page may not have loaded; inspect it in the preview after allowing it to render. If content is clipped inside the page, changing scene scale alone may not solve the viewport or page-layout problem.
Will the clock keep the right time in a 24/7 stream?
That depends on how the chosen page provides time and handles time zones, not on OBS checking the clock for you. Set or confirm the intended zone, then verify the display in OBS and in a test broadcast. Recheck after moving the page to another machine or changing the hosted overlay settings.