We are excited to announce a new feature on our events page: real-time synchronization between our event listings and YouTube livestreams. This means that when EPIC Masjid or any other organization goes live for Taraweeh, Qiyam, or any other event, our website reflects that status automatically.
What Changed
Previously, our events page showed a scheduled start time and a static status. If a livestream ran longer than expected or started a few minutes late, our listing did not reflect that. The event would simply say "Upcoming" before it started and "Past" after a hardcoded cutoff time, regardless of what was actually happening on YouTube.
Now, our system connects directly to the YouTube Data API to check whether a linked livestream is scheduled, currently live, or has ended. The event status on our website updates accordingly, and once the stream concludes, we store and display the actual end time as reported by YouTube.
How It Works
When an administrator or moderator creates an event and pastes a YouTube link into the event form, the system automatically extracts the video ID from the URL and stores it. No extra steps are needed. The admin clicks save, and the connection between the event and the YouTube video is established.
From that point, a background process monitors the linked YouTube video at regular intervals during the event window. The system does not watch YouTube playlists or automatically create events. Event creation is always done by an admin. The automation only applies to tracking the livestream status of events that already exist on the site.
The status transitions follow this sequence:
- Upcoming: The event is scheduled but the livestream has not started yet.
- Live: The YouTube livestream is actively broadcasting. A red "Live" badge appears next to the event time on the events page.
- Past: The livestream has ended. The actual end time from YouTube is displayed alongside the start time, and the link changes to "Watch Replay."
What You See on the Events Page
For upcoming events, the display remains the same: the scheduled date and time with a link to watch when it begins.
For live events, you will see the scheduled time with a "Live" badge next to it. Screen reader users will hear "This event is live now" when they reach the badge. The link text changes to "Watch Live" so you can join immediately.
For past events, the date column now reads something like: "Mar 14, 2026 Started: 9:30 PM | Ended: 12:09 AM." This tells you exactly when the event began and when it actually concluded, not just the estimated time. The link text changes to "Watch Replay" so you can go back and view the recording.
Accessibility
Every element of this feature was built with accessibility in mind from day one.
- Start and end times use semantic HTML time elements with machine-readable datetime attributes.
- The "Live" badge uses a status role so screen readers announce it appropriately.
- All links include descriptive labels that identify the event by name, for example: "Watch replay of 2026 Ramadan Night 25."
- The pulsing animation on the Live badge respects the reduced motion preference and will not animate if that setting is enabled.
- Timezone conversion continues to work for visitors outside the Central Time zone.
Technical Details
For those interested in how this was built:
- The integration uses the YouTube Data API v3, specifically the videos.list endpoint, which costs only 1 quota unit per call out of a daily allowance of 10,000 free units.
- The system only checks events that fall within a 6-hour window around their scheduled time. This prevents unnecessary API calls for events that are days away or long since concluded.
- When a new event is saved with a YouTube link, the video ID is automatically extracted from the URL. This works with standard YouTube URLs, shortened URLs, live URLs, and embed URLs.
- If the YouTube API is unavailable or returns an error, the system gracefully falls back to the existing scheduled time. No event status is changed unless the API confirms a new state.
- All 34 existing Ramadan events were retroactively updated with their actual end times from YouTube, giving our members an accurate historical record of every Taraweeh and Qiyam night.
Why This Matters
Ramadan is a time of community. When thousands of people are looking for the Taraweeh livestream, they should not have to guess whether the event has started. They should not have to wonder if the stream is still going or if it ended an hour ago. This feature removes that uncertainty.
It also creates a permanent, accurate record. Years from now, someone can look back at our events page and see exactly when each night of Ramadan Taraweeh began and ended. That kind of historical accuracy matters for a community resource.
Development Timeline
This feature was developed over the course of approximately two weeks during March 2026. Here is a breakdown of the major phases:
- Research and planning (2 days): Audited the existing event system architecture, reviewed YouTube Data API v3 documentation and quota limits, and designed the integration approach with a focus on reliability and minimal API usage.
- Backend development (3 days): Built the YouTube Live Service class, added new database fields for the video ID and actual end time, implemented the automatic video ID extraction from URLs, and registered the service in Drupal's dependency injection container.
- Cron and sync logic (2 days): Implemented the background status sync with time-window filtering, status mapping between YouTube states and Drupal taxonomy terms, safe fallback behavior when the API is unavailable, and diagnostic tooling for admin troubleshooting.
- Frontend and accessibility (3 days): Updated the events page display to show start and end times for past events, added the "Live" badge with screen reader support and reduced motion compliance, changed link text to "Watch Replay" and "Watch Live" with descriptive aria-labels, and ensured timezone conversion continues to work correctly.
- Data migration and testing (2 days): Backfilled all 34 existing Ramadan events with YouTube video IDs and actual end times from the API, tested status transitions with real livestream data, verified accessibility with VoiceOver, and validated quota usage estimates against the 10,000 unit daily limit.
- Documentation and deployment (1 day): Wrote this blog post, updated the changelog, exported configuration, and deployed to production.
Total estimated effort: approximately 13 working days across research, development, testing, and deployment.
How Often Does It Check
The system checks YouTube every 15 minutes during a 6-hour window around each event. Here is what a typical Taraweeh night looks like:
- Two hours before the scheduled start, the system begins checking the linked YouTube video.
- Every 15 minutes, it asks YouTube: is this stream upcoming, live, or ended?
- When YouTube reports the stream is live, the event status updates to Live within 15 minutes.
- When the stream ends, the actual end time is recorded and the event moves to Past.
- Four hours after the scheduled start, the system stops checking that event.
For a Taraweeh scheduled at 9:30 PM, the system starts watching at 7:30 PM and stops by 1:30 AM. That is about 24 checks per event per night. Each check uses one unit out of a free daily allowance of 10,000 units from the YouTube Data API. Even during Ramadan with 30 events, daily usage stays well under the free limit.
To reduce unnecessary calls further, all responses are cached at the network edge. If the same video is checked within 30 seconds, the cached result is returned without contacting YouTube again. Once a stream has ended, the result is cached for 24 hours since it will not change.
Looking Ahead
While Ramadan 1447 is nearing its conclusion, this feature is built to last. Next Ramadan, and for any future events linked to YouTube livestreams, the system will work automatically. When a new playlist is created and events are added, the synchronization begins without any additional configuration.
We are always looking for ways to make our platform more useful, more accurate, and more accessible. If you have feedback or suggestions, please reach out to us at [email protected].