A clock and prayer schedule can sit over a 24/7 mantra stream as a transparent HTML layer in OBS. The technical steps are straightforward; choosing the right location, calculation convention and local adjustments takes more care, because OBS displays the schedule but does not validate it.
Use a timetable that represents the audience or place you intend, and check it against the relevant local authority before broadcasting. This guide walks through the choices, a local Browser Source workflow and a preview routine that can catch mistakes before viewers see them.
Decide whose location the schedule represents
Start by deciding what the clock and timetable are for. A channel may be operated from one city while most viewers are elsewhere; a schedule meant for the operator's local community may therefore differ from one intended for a dispersed audience. State the chosen place on screen so viewers can tell what they are looking at.
Use a city, address or coordinates that identify the intended location closely enough for the source you use. AlAdhan's Prayer Times API documents requests based on coordinates, city and country, or address. Whichever input you use, check that it resolves to the expected place rather than a similarly named city or a broad region.
Also settle the time zone and date behaviour of the clock. A page that displays the computer's local time may show the operator's time zone, not the audience's. If the overlay is meant to represent a specific city, make its clock use that city's time zone and confirm that the date changes at the intended local midnight. Avoid a label such as “local time” unless the location is named.
This is worth deciding before styling. A neatly designed overlay can still mislead if its label says one city, its clock uses another time zone and its prayer data comes from a third location. Write down the intended city, time zone and audience before you configure anything.
Choose the relevant prayer-time convention
Prayer calculations are not a single universal setting. Services offer different methods, and local authorities may apply preferences or minute adjustments. AlAdhan's explanation of calculation methods describes this variation; it advises users to consider the method used by the issuing authority closest to their base.
Ask the mosque, recognised local authority or community whose timetable the stream is meant to represent which convention it uses. If there is a published timetable for the chosen place, use it as the comparison point. Do not infer a method from a country name alone, and do not assume a setting used by another channel applies to your audience.
If you use an API, record its method setting and any per-prayer adjustments alongside the location. If you enter a published timetable manually, note where it came from and when you checked it. These notes make it easier to revisit a mismatch later, rather than trying to remember which options produced the numbers on screen.
The practical choice is between easier automation and closer alignment with a local source. An API can generate timings from location inputs, but the output still needs checking against the intended authority. A published local timetable may take more manual upkeep, yet can be the clearer reference if that is what viewers recognise. Neither route makes one schedule right for every viewer.
Create a transparent clock and timetable overlay
An OBS Browser Source can display a webpage inside a scene, including a local HTML file. That makes a small transparent page a useful way to combine a clock, location label and daily prayer timetable without covering the mantra video with an opaque panel. The OBS Browser Source guide describes the source as a browser that can be added directly to OBS for custom layouts and other web content.
You can make one HTML page with the clock and timetable together, or use two sources. A combined page keeps the visual treatment consistent and is simpler to place as one block. Separate sources let you move the clock independently from the schedule, which helps when the video composition has different clear spaces; it also means more pieces to edit and check. Choose the arrangement you can maintain.
A local page keeps the design under your control and does not depend on a hosted webpage being reachable during playback. A hosted overlay can be convenient to update from elsewhere, but it depends on a network connection and the page continuing to load. For a basic informational layer, a local file is a sensible starting point if you are comfortable keeping a copy of the timetable current.
The page should make the essentials legible without claiming more authority than it has: a named location, clock, date, prayer names and times, and, where useful, a short note identifying the timetable source or convention. Avoid tiny footnotes, ambiguous abbreviations and labels like “official” unless the source itself warrants that description. Keep the background transparent, with a restrained solid or semi-opaque panel behind the text only if the video makes it hard to read.
A community OBS forum clock-overlay guide documents a local HTML workflow. You can adapt that pattern for a clock, but prayer data must be added and checked separately; a clock file does not supply a validated timetable by itself.
Load the page as an OBS Browser Source
Save the finished overlay as an HTML file in a folder you can find again. In OBS, add a Browser Source to the scene, choose the option to load a local file, and browse to that file. The community clock-overlay workflow uses this local-file approach; OBS's own Browser Source documentation covers displaying web content in a scene.
Set the source's width and height to match the overlay's intended layout, then apply the source. The dimensions affect how the page is rendered, so a page designed for one aspect ratio can appear cramped or oversized if the source size differs. Start with a size that gives the text enough room, then adjust it in the scene rather than shrinking the content until it becomes unreadable.
For a combined overlay, add the clock and schedule to the same page before loading it. If you use separate pages, add each as its own Browser Source and give them clear names in the OBS Sources panel, such as “City clock” and “Prayer timetable”. Naming makes it less likely that you will edit or hide the wrong layer during maintenance.
A remote URL is another Browser Source route, but test it with the network conditions and update process you expect to use. A local file reduces dependency on a remote page; it does not remove the need to update a hand-maintained timetable or check a generated one. Keep a backup of the working file before making changes, so an editing mistake does not leave you rebuilding the overlay during a live session.
Position and size the overlay in the scene
Place the Browser Source above the mantra video in the scene's source order. Move it to an area that does not obscure a face, deity image, subtitles or other information the viewer needs. Corner placement is common, but the video content should decide the location; a visual element that moves or changes can make a previously clear corner unsuitable.
Use OBS's transform controls to position and size the source, keeping its proportions intact where possible. If the page has a broad timetable, it may need more width than a compact clock. Separate sources can help when the clock belongs in one corner and a short schedule in another; a combined source can be easier to align when both should read as one unit.
Check the overlay on the actual canvas size and on a smaller preview. Text that seems clear in the OBS editor can become difficult to read when viewed at a phone-sized scale. Give prayer names and times enough separation that the eye does not pair one row's name with the next row's time. Keep the location label attached to the schedule so it is not separated by cropping or layout changes.
The overlay should remain secondary to the stream's main content. A large, bright panel can dominate a quiet mantra loop, while a faint one can disappear over a light background. Use contrast and modest spacing rather than animation or decorative effects that compete with the video.
Verify the clock, schedule and adjustments
Treat the first render as a layout test, not as evidence that the times are right. Compare each displayed prayer time with the timetable from the relevant local authority for the named place and date. If the source is an API, verify the location and calculation method sent to it; if you have applied minute adjustments, confirm that they reflect the local source rather than a guess.
Check more than one date, including a date when you expect a time-zone or daylight-saving transition if that applies to the location. Confirm the displayed date and clock at the same time. A correct-looking clock can still be paired with a schedule generated for the wrong date, and a correct timetable can appear to belong to yesterday if the overlay changes dates at the wrong local midnight.
Write down the reference source, selected method, location input and adjustments. Then compare the whole daily table row by row. If there is a difference, pause and find its cause: a location mismatch, a different method, a local adjustment, rounding or a date/time-zone error can all affect the display. Do not resolve a discrepancy by selecting whichever output looks closer without asking the intended authority.
No overlay can make a disputed or unverified timetable authoritative. AlAdhan documents method variation and local tuning, but the relevant local authority is the appropriate reference for a schedule intended to follow its convention. If no clear authority has been selected, label the schedule plainly as a calculation for the stated location and method, or leave it off until you have settled the reference.
For a channel where the rest of the broadcast must keep running while your computer is off, the overlay is only one part of the operating plan. StreamNeo removes the specific need to leave your computer on to carry an uploaded video as a continuous YouTube broadcast; keep the schedule's source and verification process under your own control. If you run playback in OBS instead, check that your chosen playback workflow and scene remain compatible with the computer and software you use. A separate guide to looping pre-recorded videos around the clock covers that broader operating choice.
Check readability in a live preview
Preview the complete scene before going live, with the mantra video playing beneath the overlay. Look at the preview at the scale viewers are likely to use, including a phone-sized window if possible. Confirm that the clock is readable, that each prayer time can be matched to its label, and that the location and date have not been clipped.
Check both light and dark parts of the video. If the text disappears over a bright frame, add a subtle backing panel or outline; if the panel hides too much of the image, reduce its size or move it to clearer space. Review a longer stretch of the loop if the imagery changes, since a placement that works on the opening frame may overlap a later scene.
Inspect the Browser Source after restarting OBS as part of your pre-broadcast routine. Confirm that the local file still loads and that the intended version is visible. For a remote page, confirm that it loads as expected rather than relying on a cached preview. If the timetable is updated manually, compare the visible version with the saved reference before each planned update.
A clock-and-schedule layer does not establish that the stream itself will remain available continuously. Playback, connection stability, and recovery from interruptions are separate concerns. If you are using OBS on a local computer, consider the computer's capacity alongside the additional scene elements; this guide to CPU and RAM for 24/7 streaming explains why playback workload matters. A further stream health troubleshooting guide covers a separate YouTube status issue, not timetable verification.
Keep a simple pre-live checklist: location and time zone named; convention and adjustments recorded; timetable compared with the selected local reference; clock and date checked; text readable over the video; local or remote page reloaded successfully. That routine cannot settle every difference in convention, but it helps ensure viewers are not shown a schedule that only looks precise.
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
How do I add a clock to OBS?
Add a Browser Source to your scene and point it to a clock webpage or a local HTML file. For a local page, enable the local-file option, select the HTML file, and set source dimensions that suit the page. Place it above the video layer, then check its size and readability in the full scene.
How do I show prayer times on a livestream?
Put a timetable in a transparent HTML overlay and add it as an OBS Browser Source, either in the same page as the clock or as a separate source. Choose the location and calculation convention first, then compare the displayed times with the appropriate local reference before broadcasting. OBS renders the page; it does not check whether its times are correct.
Why might two prayer timetables differ?
They may use different locations, calculation methods, local adjustments or date and time-zone settings. Compare the inputs and method with the authority whose timetable you intend to represent, rather than assuming either output is universally correct. If you make a local adjustment, record its source.
Can this overlay keep a YouTube stream running 24/7?
No. The Browser Source adds information to an OBS scene; it does not keep playback or a broadcast running by itself. Continuous operation depends on the way you run the video and manage interruptions, which should be tested separately from the overlay.