Stream Starting Soon + Youtube Live Viewers Likes Counter Overlay

YouTube Live Thumbnail Overlay (OBS Studio Browser Source)

I created this YouTube Live Thumbnail Overlay for OBS Studio to solve a common problem I kept running into during live streams: I wanted a clean, professional way to display my stream title, channel name, live likes, live viewers, and a reliable “Starting Soon” countdown without constantly editing scenes. This overlay by MML Tech is designed to be plug-and-play, lightweight, and fully controlled from a single config.json file.

It works as an OBS Studio Browser Source using the Local File workflow, meaning I simply add the HTML file to OBS and manage everything else from the configuration file. There is no need to touch the core HTML structure. That keeps the setup simple, beginner-friendly, and stable.

What This Overlay Actually Does

At its core, this is a dynamic YouTube livestream overlay that automatically pulls stream data using the YouTube Data API. When connected properly, it displays the current stream title and channel name and updates live engagement metrics such as likes and viewers at a configurable refresh interval.

This overlay is designed to reduce friction: I configure it once, and it handles the rest automatically during my stream.

If the API data is not available, fallback values defined in config.json are displayed instead. When the API connection works, those fallback values are automatically overwritten with real-time data.

Key Features

Requirements

To use this overlay effectively, I make sure I have the following:

OBS Studio: Latest version recommended.
YouTube Video ID: A valid livestream or video ID.
YouTube Data API Key: Required for pulling live stats.
Overlay Files: The HTML file and config.json stored in the same folder.

How I Add It to OBS Studio

Adding the overlay takes only a few minutes:

1. Open OBS Studio.
2. Add a new Browser Source in the Sources panel.
3. Enable Local File and select the overlay HTML file.
4. Set the resolution to 1920x1080 for full HD streams.
5. Click OK and position the overlay on the canvas.

Once added, I rarely touch the Browser Source settings again. All adjustments happen inside config.json.

How Configuration Works

The overlay is designed around a single configuration file. That file controls:

YouTube Settings: Video ID, API key, and refresh interval.
Countdown Schedule: ISO target date, timezone formatting, and zero behavior.
Theme Controls: Gradient colors, text colors, typography settings.
Labels and CTA: Custom text for viewers, likes, and call-to-action lines.
Emote Settings: Static mode or automatic cycling faces.

After I save changes, OBS updates automatically. If needed, I refresh the Browser Source manually.

Countdown and LIVE Behavior

The countdown system uses a precise ISO timestamp, including timezone offset such as +02:00. This prevents incorrect start times, especially when scheduling event-based streams.

When the countdown reaches zero, the overlay switches to a LIVE state automatically, reinforcing urgency and professionalism.

I can choose to display days for long countdowns, customize the “LIVE NOW” message, or hide the badge entirely depending on my stream style.

Styling and Branding Strategy

Brand consistency is important. I match the overlay gradient colors to my channel branding using HEX values. I select clean, readable fonts such as Poppins or similar Google Fonts. I ensure strong contrast between background and stats text to maintain readability across devices.

For high-energy streams, I use animated emote cycle mode. For corporate or minimalist streams, I switch to static mode for a cleaner presentation.

Best Use Cases

This overlay works particularly well for:

Starting Soon Screens: Countdown combined with animated faces keeps viewers engaged before the stream begins.
YouTube Live Thumbnails: Professional layout that looks strong both live and in recorded VODs.
Event Streams: Scheduled launches with timezone-safe countdown precision.
Brand Channels: Consistent, centralized control from a single configuration file.

Common Issues and Fixes

If live stats are not updating, I verify the API key and video ID first. If the countdown shows the wrong time, I confirm the timezone portion of the ISO timestamp. If nothing updates, refreshing the Browser Source inside OBS usually resolves it.

Overall, this YouTube Live Thumbnail Overlay provides a streamlined, professional solution for creators who want automation, flexibility, and clean design without complex coding. It keeps my workflow efficient while improving the visual impact of every live stream.

Prepare your pre-stream screen

This starting soon screen is meant to turn the waiting period into part of the show. Use it before you go live to give viewers a clear countdown, set the visual tone, and avoid leaving early arrivals on a blank or unfinished scene.

For this specific resource, the key value is: A plug-and-play YouTube live thumbnail overlay for OBS Studio. Automatically shows stream title, channel name, live likes & viewers, “Starting. Use the link below only after reading the details above so visitors understand what they are opening and why it belongs in their streaming workflow.

([redirect_url])[Download Stream Starting Soon + Youtube Live Viewers Likes Counter Overlay]