A podcast logo is added to an OBS scene as an image source. An episode progress bar can be added as a Browser Source, but it will only follow playback if the overlay has a documented way to read the episode's position and duration.
That distinction matters for an always-on YouTube stream. A bar that fills over a chosen time is only an estimate unless it is connected to the player running the episode. The steps below show the scene setup first, then how to choose and test the right kind of progress graphic.
What you need before opening OBS
You need OBS Studio, a podcast logo file, the episode audio or video, and a YouTube channel with live streaming enabled. You also need to decide whether the episode will play from OBS, from another player captured into OBS, or through a web-based system. The progress method depends on that choice.
Prepare the logo as a PNG or another image format OBS can read. A transparent-background PNG usually works well when the logo needs to sit over a video or a plain background. Check it at the size you expect viewers to see. A logo that looks clear in an image editor can become unreadable after it is reduced to a small corner overlay.
Keep the original artwork separate from any progress graphic. The logo identifies the show; the progress element communicates changing information. Combining them into one flat image makes the graphic harder to update and can force you to rebuild the scene when the design changes.
Before designing the overlay, note the canvas shape and output size you use in OBS. A wide logo may need a different position from a square logo, and a progress bar made for a wide canvas may be cropped if the scene uses a different aspect ratio. Leave enough space around the edges for YouTube's player controls, captions, and other interface elements.
If the episode is a local file, OBS Media Source is one possible playback route. The OBS Media Sources documentation describes support for local audio formats including MP3, AAC, OGG, and WAV, along with controls such as looping and restarting playback when the source becomes active. Those playback controls do not, by themselves, create a progress graphic or expose episode timing to an overlay.
For the stream connection, you will use YouTube Studio's Live Control Room, the stream URL, and the stream key. Treat the key as a credential. Do not place it in a screenshot, a scene text source, or the broadcast itself.
Add the podcast logo as an OBS image source
Open the scene that will carry the podcast stream, or create a new scene for it. In the Sources panel, select the add button and choose an image source. Give it a useful name such as Podcast logo, rather than accepting a generic name that will be difficult to recognise later.
When OBS asks for an image file, browse to the prepared logo. If the source is shared across scenes, decide whether it should reference the same file or a copy. A shared file is convenient when you regularly update the artwork, but changing that file can alter several scenes at once. A separate copy gives you more control over each programme.
The logo should now appear in the preview. Select it and use the red bounding box to move and resize it. You can also open the source's transform controls when you need more precise values. Keep the proportions locked while resizing unless the artwork is deliberately designed to stretch. Distorting a circular badge or a wordmark makes the stream look unfinished.
Use the preview at the intended output size rather than judging only from a large editing window. Read the smallest text in the logo and check it against the background behind it. If the artwork disappears over light and dark sections of the programme, add a simple border, shadow, or solid backing to the artwork itself. Do not rely on a complicated filter unless you have checked how it looks in the final stream.
A logo is not a replacement for episode information. If listeners need to know the episode title, guest, or current topic, reserve a separate text or browser element for that information. Keeping the identity mark separate makes it easier to change episode details without touching the permanent channel branding.
For audio-led streams, the best audio settings for streaming kirtan 24/7 on YouTube explains why the audio path deserves its own checks. The same principle applies to podcasts: an attractive overlay cannot compensate for audio that is too quiet, distorted, or missing from the broadcast mix.
Add a progress graphic with a Browser Source
A Browser Source loads a webpage into the OBS scene. That page may contain a custom HTML graphic, a hosted overlay, or a locally served page. OBS's browser-source documentation states that “OBS Studio supports the use of webpages as both Sources and Docks in the UI through obs-browser.” This makes Browser Source suitable for a web-based visual, but loading a webpage does not prove that the visual knows what the episode is doing.
To add one, use the add button in Sources and choose Browser. Name it something clear, such as Episode progress. Enter the page address, or use the local file or page method supported by the overlay you have chosen. Set the width and height to match the space the bar should occupy in your scene. If the overlay was designed for a particular canvas size, follow its own documented dimensions rather than stretching it until it fills the screen.
A simple custom page might display a coloured track and a fill element. If you control the page, you can make the fill advance according to a fixed duration, display a manually entered episode title, or receive timing from a compatible player integration. These are different implementations, even if they look identical in the preview.
Do not assume that a Browser Source can inspect every player in OBS. The webpage may be isolated from the audio source, media source, or captured application. A progress page needs an actual input for current position and total duration. That input might come from a player integration, a documented control method, or a timing system you operate yourself. If the overlay documentation does not identify that input, treat the bar as decorative or manually controlled.
A browser overlay can also show nothing while the page is loading, while its required script is unavailable, or when the page expects a player that is not present. Test it offline in the exact scene before connecting the stream. If you are using a third-party overlay, check its licensing and compatibility separately. An overlay page or plugin that works with one player does not necessarily work with every player or media source.
If your main problem is not the overlay but keeping the broadcast running away from your home connection, compare the practical choices in how to run a 24/7 YouTube live stream without using your own internet. The display setup and the long-running delivery setup are related, but they solve different problems.
Position, resize, and layer the sources
OBS displays sources in a stack. A source higher in the Sources list appears over sources below it. This is important when the progress bar overlaps the logo, a background image covers both elements, or a media source hides the overlay.
A sensible starting order is:
| Source order | Source | Purpose |
|---|---|---|
| Top | Episode progress | Shows the changing bar and any associated labels |
| Below it | Podcast logo | Keeps the permanent identity mark visible |
| Below both | Episode video or background | Supplies the main visual field |
| Bottom | Colour or image background | Prevents empty areas from appearing |
Your order may differ. For example, the logo may need to sit above the progress bar if the two deliberately intersect. The useful rule is that the source higher in the list is visually in front, so inspect the preview after each change rather than relying on a template's assumptions.
Select a source in the preview and drag it into position. Then check its transform values if you need repeatable placement across scenes. Keep the logo and progress bar inside the visible canvas, not merely inside the grey workspace around it. A source can appear correctly positioned in the editor while part of it is outside the stream output.
Place the logo where it will not cover a speaker's face, subtitles, waveform, or episode title. Place the bar where its start and end remain obvious. A progress bar along the extreme bottom edge may be hidden by player controls on some devices, while one too close to the centre may compete with the programme artwork.
Use one visual language for the two elements. A logo with a transparent background may suit a thin progress line, while a boxed logo may need a bar with a similar border and spacing. Avoid making the progress fill so subtle that viewers cannot tell the current position. The goal is to communicate location in the episode, not to add motion for its own sake.
After positioning, lock the sources you do not want to move accidentally. Keep the progress source unlocked while you are testing it, then lock it once the layout is approved. Make a note of the scene and source names so that a later operator can identify the bar without opening every source.
Choose between a timed bar and playback-synchronised progress
The most important decision is whether the bar is timed or synchronised. A timed bar advances against a duration you provide. A synchronised bar reads the actual current position of the episode and compares it with the episode duration. The first can be useful and honest, but it is not the second.
| Choice | Best when | Main trade-off |
|---|---|---|
| Static or manually updated graphic | The bar is decorative, or the operator can update it at known points | Simple to maintain, but it may not match playback |
| Timed custom graphic | The episode starts at a predictable time and does not seek or pause | Can look accurate during a clean run, but drifts when timing changes |
| Browser Source with a purpose-built integration | The overlay has a documented playback-position input for your chosen player | More capable, but it needs compatible software and testing |
| Local episode in OBS Media Source | The episode is a supported local file played through OBS | Playback can be managed in OBS, but automatic progress rendering is not established by the source documentation |
A timed bar can be built around the planned length of an episode. Suppose an episode is intended to run for a particular duration and the bar starts when the episode begins. If the file has silence at the beginning, the stream starts late, the operator pauses playback, or the episode is replaced with a different version, the fill will no longer represent the actual position. That is not necessarily a problem if you label or present it as an approximate visual, but it is a problem if viewers are led to believe it is exact.
A playback-synchronised bar needs two values: the current position and the total duration. It also needs rules for pauses, seeking, restarts, and episode transitions. A suitable integration might read those values from a player that it explicitly supports. You must verify the player, media route, and control method together. A page that reads an HTML5 video element may not read an OBS Media Source, a desktop audio player, or a captured application.
OBS provides the composition layer in this workflow. It does not automatically turn every local or captured episode into a synchronised progress display. The reviewed OBS source documentation covers placing webpages, playing supported media, and arranging sources, not a built-in podcast progress-bar feature.
If you use a local episode in Media Source, make the audio routing intentional. Confirm that the source is enabled, that its meter moves when the episode plays, and that the source reaches the stream mix. Then test what happens when the file ends and the next episode begins. The audio can transition correctly while the bar remains full, resets late, or continues from the previous timing system.
If you want a single uploaded file to run continuously without leaving your computer switched on, StreamNeo removes the need to keep rebuilding a local playback computer, while you still need to prepare and verify the visual content and YouTube connection yourself.
Connect OBS to YouTube without exposing the key
When the scene is ready, open YouTube Studio, choose Create, then Go Live, and use the Live Control Room. YouTube's guide to creating a live stream with an encoder explains the encoder connection sequence. You provide the stream URL and stream key to OBS, then start the encoder.
YouTube describes an encoder as something that converts your video into a digital format for streaming on YouTube. In practical terms, OBS composes the scene and sends the resulting programme to YouTube. The logo and progress bar are therefore part of the encoded video, not separate YouTube metadata that viewers can switch off.
For a scheduled broadcast, wait for the preview in Live Control Room and use the control there to go live when the preview is correct. Exact labels can change, so check YouTube's current instructions before a production broadcast. Do not paste the stream key into a visible text source, share it in a tutorial screenshot, or store it in a public document.
The YouTube connection does not validate the progress bar. A clean preview only confirms that the composed picture is reaching the control room. You still need to verify that the fill begins at the intended moment, responds to the chosen playback method, and behaves correctly when the episode changes.
Test the overlay through an episode transition
Test a complete episode where possible, but also use a short controlled test to expose the important failure points. Start with the scene open and the episode at its beginning. Check that the logo appears immediately, the bar is visible, and the audio meter moves. Look at the preview at the output size rather than only at the source properties.
Seek forward if your playback method permits it. A true position-driven bar should respond to the new position according to its documented integration. A timed bar may continue as if nothing happened. That result is not a software fault if the bar was only designed to follow elapsed wall-clock time, but you must know which behaviour you are offering viewers.
Pause the episode and resume it. Check whether the bar pauses, keeps moving, or restarts. If the bar and audio follow different clocks, record that limitation and decide whether a simpler static design would be more truthful.
Test the end of an episode and the start of the next one. Watch for a full bar that remains full, a fill that resets before the new audio starts, a title that changes while the old bar remains, or a browser page that does not receive the new duration. These are common transition points because the player and overlay may not receive the same event.
Check the overlay against different backgrounds. A transparent logo may disappear over a bright frame, while a thin progress line may be lost over detailed artwork. Also check captions or on-screen text if your programme uses them. Move the elements if they compete with information that viewers need to read.
Before the first broadcast, follow a wider YouTube RTMP setup test before starting a 24/7 stream. Test the encoder connection, scene configuration, audio, and stream smoothness before relying on the setup overnight. A progress bar that looks correct locally is only one part of that check.
Keep a short written run sheet. Include the scene name, the playback source, the intended episode duration, the overlay URL or file, and what should happen at the transition. This helps you distinguish a broken overlay from a normal timed-bar limitation when something looks wrong during a live run.
Troubleshoot missing or misplaced overlay elements
If the logo is absent, select its source and confirm that the correct image file is loaded. Check that the source is visible and not hidden by an eye icon, then move it temporarily to the centre of the canvas. If it appears there, the problem is position or size rather than the file. If it does not appear, check the file path and whether the image itself has transparent or empty content.
If the progress graphic is missing, confirm that the Browser Source is visible and that its width and height are not set too small. Open the page in a normal browser to see whether it loads outside OBS. A page that requires a login, blocked script, unavailable asset, or player connection may display correctly in a browser but still fail inside the OBS browser source.
If the browser source shows a blank page, reload it and check the overlay's own setup instructions. Do not assume the blank result is caused by OBS layering. If other sources appear above it, move the progress source higher in the list for a quick test. Once visible, put it back into the intended order.
If the bar is cropped, inspect both the source dimensions and its transform. A source can be larger than the canvas even when part of its design is outside the visible frame. Resize it to fit the available area, then check the left and right ends of the track in the preview.
If the logo is blurry, start with a larger source image and resize it down while preserving its proportions. If only fine lettering is unreadable, simplify the artwork or use a version intended for small display. Increasing OBS's canvas does not restore detail that is missing from a small original file.
If the bar moves but is wrong, identify its clock. Is it following a fixed timer, the start time of the scene, the start time of an OBS media source, or an actual playback-position integration. Then test pause, seek, restart, and transition behaviour. Without a documented position source, you cannot reasonably expect the graphic to know what the episode is doing.
If the audio changes episode but the bar does not, the audio route and overlay route are probably receiving different signals. A Media Source can start a new file while a separate browser page continues its old timer. Use a compatible integration, update the overlay's control input, or replace the progress element with a manually managed graphic.
Finally, record the version of OBS, the overlay page or code, the playback method, and the scene settings when you test. Overlay problems are easier to reproduce when you know exactly which combination was running. Do not install an unverified plugin merely to make a decorative bar appear synchronised.
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 my podcast logo to an OBS stream?
Add an Image Source in the OBS scene, choose the logo file, and position it in the preview. Resize it without changing its proportions, place it above the background or episode media source, and check that it remains legible at the stream's output size.
How do I show an episode progress bar on a YouTube livestream?
Add the graphic as a Browser Source if it is supplied as a webpage or custom web overlay. A timed bar can follow a planned duration, while an accurate bar needs a documented connection to the current playback position and total duration of the player you are using.
Can OBS show how far along a podcast episode is automatically?
OBS can play supported local media and can display browser-based graphics, but the reviewed source documentation does not establish an automatic podcast progress-bar feature. Automatic synchronisation requires a compatible overlay or control setup that can read the chosen player's timing.
Why does my progress bar keep running after the episode changes?
The bar may be using its own timer while the audio is being changed by a separate source. Test the episode transition, pause, and seek behaviour, then either connect the overlay to a documented playback-position source or present the bar as an approximate visual rather than an exact tracker.