To add a clock overlay to an OBS YouTube loop stream, add a Browser Source for a local clock file or a clock webpage to the same scene as your loop video. Place the clock source above the video in the Sources list, then position and size it in the preview so it is readable without covering important content.
The clock is part of OBS scene composition, not a YouTube setting or a built-in OBS clock source. A local HTML page keeps the display files on your computer; a webpage is easier to replace but depends on that page remaining available and able to update during a long stream.
How an OBS clock overlay works
OBS builds a scene from separate sources. Your loop might be a Media Source playing a video file, while a Browser Source renders a clock page over it. Each source stays independently adjustable: you can move, resize, hide or change the clock without altering the video itself.
The OBS Project’s Browser Source guide explains that the source can display a local file or a URL. The browser source is a page viewport; the clock’s appearance and updating behaviour come from the file or webpage you load, not from OBS supplying a clock. If the page stops working, loses access to a resource it needs, or does not refresh its time, the overlay may stop showing the correct time.
Keep the loop and clock separate. If you bake a clock into the video, it cannot be repositioned independently and may show an out-of-date time whenever the same video section loops. A separate source instead renders the current page above each playback cycle. This is useful for a devotional stream that repeats a programme file, a study channel with a background loop, or a local business stream that wants viewers to see the time.
If the loop does not repeat as expected, check the Media Source’s Loop property. OBS documents this in its Media Sources guide. A clock overlay does not change loop behaviour; it is a separate layer. For the wider steps involved in sending prerecorded material from OBS to YouTube, see this guide to streaming prerecorded videos with OBS on Windows 11 in India.
Add a Browser Source to your scene
Open the OBS scene that contains the loop video. In the Sources dock, select the plus control and choose Browser or Browser Source, depending on the wording in your OBS version. Give it a clear name such as Clock – local or Clock – webpage so you can identify it later. Choose whether to create a new source or reuse an existing one; a new source is usually simpler when you are setting up a clock for the first time.
The Browser Source properties let you choose a local file or enter a URL, and set the viewport width and height. The viewport is the browser page’s rendering area, not necessarily the final size of the clock on the stream. OBS lists 800 by 600 as the default dimensions, but that is not a recommended overlay size for every layout. Choose dimensions that suit the clock page and your scene, then use the preview to determine its on-screen size.
Make sure the source is enabled. A hidden source cannot appear in the output. If the properties window has controls for shutting the source down while hidden or refreshing it when a scene becomes active, consider how you use scenes before changing them. Shutting it down while hidden unloads the page; a page that needs to keep running while hidden should not be unloaded. These options affect page lifecycle, not whether the page itself has a working clock.
Do not confuse this process with YouTube’s break overlay. YouTube Help describes adding a Browser Source URL for its Take a Break feature; that is an away slate in Live Control Room, not a required step for adding an ordinary clock to an OBS scene.
Load a local clock HTML file
A local HTML file is a practical choice when you want to keep the clock page on the same computer as OBS and avoid depending on a clock website remaining online. In Browser Source properties, select Local File, browse to the HTML file you trust, and open it. Set the viewport dimensions to give the page enough room for its clock layout, then apply the properties and check the preview.
A local file is still a webpage: it needs to contain a working method to display and update the time. Selecting a file does not turn arbitrary HTML into a clock. Some community examples include the display code in the file itself; others may rely on scripts, fonts, images or other resources. If those are absent or blocked, the clock may be blank or incomplete. Prefer a source you trust, inspect what you download, and keep the file in a stable location rather than moving or renaming it after setup.
Some community clock pages let you customise the HTML or CSS, including date format and visual styling. Treat those as features of that particular file, not OBS controls. Before editing, keep an untouched copy so you can revert if a change breaks the page. If you change the file while OBS is open, refresh the Browser Source or reopen its properties to check whether the change is reflected.
A local clock is not automatically more reliable in every respect. It avoids relying on a third-party webpage being available, but the computer must still be on, the file must remain accessible, and the page’s time logic must work. If a local page has a timezone setting, choose the zone your viewers need rather than assuming the computer’s clock is set correctly. For an India-facing channel, explicitly confirm whether the display should use India Standard Time, particularly if the computer is configured for another region.
Use a clock webpage URL instead
If you have selected a clock page hosted online, choose the URL option in Browser Source and enter the complete address. The source loads that page in its viewport, much like a browser tab. Check the page in OBS itself: a website that looks right in an ordinary browser may lay out differently in the selected viewport or may include surrounding menus and controls that you do not want in the stream.
A hosted page can be convenient if it offers controls for timezone, date, 12- or 24-hour time, seconds, font and colour. Those controls belong to the page provider; OBS does not guarantee them. Before using a URL for an overnight stream, verify that the time actually changes in OBS, not only in the page’s preview or in a separate browser window. Also consider what viewers would see if the page is slow, unavailable, or changed by its owner.
This route depends on continued access to the page and any assets it uses. It may be easier to set up than customising a local file, but it gives you less control over the page itself. The cited OBS documentation confirms that Browser Source accepts URLs; it does not vouch for any particular clock site or guarantee that one will remain available. Avoid a page that requires a sign-in, shows unrelated material, or is difficult to read at the size you need.
If you run a stream continuously, a small page dependency can become a practical concern: if the page fails while you are away from the computer, the display may no longer be useful. Decide whether you want the convenience of a hosted page or the control of a local file, and test the selected route for the length of time you can reasonably observe before relying on it. For broader continuity planning, this article on keeping a 24/7 sleep-sounds stream running on a spare PC covers the separate question of keeping OBS and playback running.
Put the clock above the video source
OBS draws sources according to their order in the Sources list. A source higher in the list is rendered above sources lower down. If the clock appears behind the video, select the clock source and move it above the loop video. The source list is the layer order; it is not a separate setting on YouTube.
You can keep the clock source above the video while retaining other elements, such as a logo or a lower-third title, in the same scene. Consider the intended hierarchy: a clock should be visible, but it need not sit over a face, lyrics, subtitles or a business contact detail. If another source overlaps it, review the ordering of those sources as well as the clock’s position.
If the clock disappears, check both its visibility icon and its position in the source list. A visible eye icon does not by itself confirm that another source is not covering it. Conversely, moving the source to the top will not help if it is hidden or the browser page has not loaded. Test the source and the layering separately rather than changing several settings at once.
Position and resize the overlay in the preview
Select the clock source and use the preview to drag it to a corner or another clear part of the frame. Use the handles around its bounding box to resize it. Position and size are distinct from the Browser Source viewport: the viewport determines the page area, while the transform in the preview determines where that area appears in the scene.
Start with a corner where the loop video has relatively little detail. A clock over a plain dark wall, sky or blank margin may be easier to read than one placed across changing footage. Leave space from the edge so the text does not feel cropped, and keep it clear of any other information viewers need. A larger clock is easier to read on a phone, but it also hides more of the underlying scene. Check the actual stream composition at a reduced preview size rather than judging only from a large OBS canvas.
If the text is clipped, first determine whether the clock is clipped inside its browser viewport or outside the source’s frame in the scene. Increase the Browser Source width or height if the page’s content does not fit its viewport. Adjust the source’s position or transform if the source frame is off the canvas. If the lettering is simply small, you may need a page setting for font size or a larger overall source; stretching a tiny page can make the layout awkward rather than improve legibility.
Keep the clock’s colour and contrast in mind. White text can disappear over a bright sky; dark text can disappear over a night scene. If the page supports a background, outline or shadow, use it sparingly to separate the time from changing footage. If viewers need to interpret the time zone, include an explicit label in the clock page where possible rather than relying on them to infer it.
For a portrait or vertical layout, placement needs another pass because the visible content area is narrower and the clock can occupy a larger share of the frame. This guide to vertical video loops on YouTube Shorts Live explains why a layout built for landscape should not simply be assumed to work in portrait. Check that the clock remains inside the output canvas and does not cover the main subject or text.
Test the scene during playback
Before going live, start the loop in OBS and watch the clock in the preview. Confirm the date and time format, timezone, visibility, position and legibility. If seconds are shown, wait long enough to see whether they change. A display that looks plausible in a still frame is not proof that its page continues to update.
Check that the loop itself repeats. With a local OBS Media Source, verify that Loop is enabled. If your scene uses a VLC playlist instead, that source has its own playlist loop behaviour and requirements; do not change source types just to add the clock. The clock and repeat settings solve separate problems.
Then inspect the output you intend viewers to see. OBS preview composition is useful, but a stream preview can reveal a crop, scale or layout mismatch in the final output. YouTube’s Live Control Room help covers the live setup and preview workflow; check the current official instructions for your account and encoder setup. Do not assume an overlay makes a stream approved or resolves any separate channel, content or rights issue.
For an extended loop, monitor the page behaviour as well as playback. A hosted clock may depend on a remote page, and a local clock depends on an accessible file and working page logic. Browser Source settings that unload a hidden page can also affect what happens when you return to a scene. If the display matters during a long broadcast, test the precise scene-switching and visibility behaviour you plan to use.
When a clock freezes or shows the wrong time, narrow down the cause. Check whether the page itself updates, whether the chosen timezone is explicit, and whether a hidden-source setting has unloaded the page. If it is behind the video, change the source order; if it is clipped, review viewport dimensions and transform separately. This makes diagnosis clearer than repeatedly resizing the source without knowing which problem you are solving.
An OBS clock overlay is only one part of a reliable loop setup. Your computer still needs to keep OBS, the media file, network connection and YouTube broadcast working. If the computer running the encoder is itself the weak point, compare that situation with automatically restarting an Indian music YouTube live stream; restart planning does not replace checking that the overlay page works.
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 source?
This setup uses a Browser Source that loads a clock file or webpage; it does not depend on a built-in OBS clock source. The page or file must provide a working clock and update mechanism. A static text source by itself should not be assumed to show live time.
Why is my clock behind the loop video?
The source order controls which layer appears on top. Move the clock higher than the video in the Sources list, then confirm it is visible and that the page has loaded.
Should I use a local clock file or a webpage URL?
A local file avoids depending on a hosted clock page remaining available, but it must stay accessible and its page code must work. A URL can be simpler to set up, but depends on the page and its resources remaining available and updating during the stream.
Why does the clock look correct in OBS but not in the final stream?
Check the scene’s output dimensions, the Browser Source viewport and the source’s position and size in the preview. Then review the stream preview before going live, because an output crop or scale difference can make a well-positioned overlay look different to viewers.