To put a browser graphic over prerecorded footage on YouTube Live, add the footage as an OBS Media Source and the graphic as a Browser Source in the same scene. Place the Browser Source above the video, match its viewport to your stream canvas, and test the complete picture and audio before sending it live.
This makes the graphic part of the programme output from OBS; it does not alter a video that is already uploaded to YouTube. YouTube also has a separate break-overlay feature for switching to a break slate during a live broadcast. That is a different workflow, not a way to keep a graphic over your programme.
Build one OBS scene for footage and overlay
Start with the scene that will feed the encoder. In OBS, create a scene for the programme or select an existing one, then add the video and graphic as separate sources. Keeping them separate lets you move, hide or replace the graphic without editing the footage.
Think of the scene as a stack of visual layers. OBS draws sources in order, with higher entries in the Sources list appearing above lower entries. Your finished stack will put the Browser Source above the Media Source. The OBS Sources Guide explains this ordering and how sources are managed within a scene.
Before adding anything, check the canvas size in OBS under Settings, then Video. Use the base canvas that you intend to send to YouTube, and choose an output resolution that fits your stream plan. The Browser Source's width and height should correspond to that canvas if the web page is designed as a full-frame overlay. If you have already positioned other elements, note their layout before changing the canvas, as a different aspect ratio can shift or crop them.
A single scene is the simplest arrangement when the same graphic stays on screen throughout the video. For multiple programme states, such as an opening card followed by footage, separate scenes can be useful, but each scene needs its own deliberate source order and audio checks. Do not add a second scene merely to make a source appear above another; the Sources list already controls that.
If the channel alternates between videos and a holding card, plan whether that card is part of your OBS scene or a separate playback item. The guide to showing a branded holding screen between videos is relevant when the gap between clips needs its own visual treatment. This article focuses on one prerecorded video with a browser-rendered graphic layered over it.
Add the prerecorded video as a Media Source
In the scene, select Add in the Sources panel and choose Media Source. Give the source a clear name, such as “Programme video”, then open its properties and select the local video file. A Media Source is OBS's source for local video playback; a Browser Source, by contrast, renders a webpage or local web document. See the OBS Media Sources guide for the available playback properties.
Decide what should happen at the end of the file. If this is a single programme that should repeat, enable looping. If it should play once and leave a blank or other scene state at the end, leave looping off and decide how the scene should look when playback finishes. OBS also provides controls for restarting playback when the source becomes active and for showing nothing after the file ends. The right choices depend on whether you are building a repeating station or a one-time live event.
For a continuous channel, looping can be helpful, but inspect the transition from the final frame back to the beginning. A hard cut may be acceptable for a music visualiser or a deliberately repetitive ambience loop, while a spoken introduction or a news package may need a designed end card instead. Do not assume that a video which loops smoothly in an editing player will look seamless in OBS; check the actual source playback in the scene.
If the scene already has an audio source, identify which source is meant to carry programme sound. A Media Source can provide the video's audio along with its picture. Adding a separate music or microphone source on top can create doubled sound, unexpected overlap or silence if one source is muted. Use the OBS Audio Mixer to verify what is active rather than inferring it from the picture.
A local file avoids dependence on a web player for the main footage, but it still depends on the computer and OBS remaining available during the broadcast. If your real requirement is an uninterrupted prerecorded channel while your own computer is off, compare that operating model with the one described in how a pre-recorded ASMR playlist can run continuously on YouTube. That is a different operational question from how to layer sources in an OBS scene.
Add and size the Browser Source
In the same scene, use Add and choose Browser Source. You can point it to a URL or enable the local-file option and select an overlay page on your computer. Name it for its purpose, such as “Clock and channel name”, so that another person can identify it quickly when reviewing the scene.
Set the Browser Source width and height to the intended canvas dimensions when the page is designed to fill the frame. A page made for a different viewport can wrap text, move an element or scale a logo in unexpected ways. If the page is intended as a small panel rather than a full-frame design, its viewport still affects the layout inside that panel; set dimensions deliberately, then size and position the source in the OBS preview.
OBS's default custom CSS for a Browser Source sets a transparent page background, removes page margins and hides scrollbars. That is useful for overlays, but transparency only works where the page itself leaves the background transparent. If the HTML or website draws an opaque background across the page, the source will cover the footage with that background. A transparent browser canvas does not automatically remove a background built into the overlay artwork.
Check the source's appearance in the preview at the output size, not only in a browser window on your desktop. Inspect small text, logos, edges and any animation. A graphic that is legible on a large monitor can become difficult to read on a phone, and a moving element can draw attention away from the main video. For text and graphic decisions, the guide to choosing typography for live streams and video can help you think through size and legibility without relying on desktop-only viewing.
If you use a URL, confirm it loads without a sign-in prompt or an interstitial that OBS cannot dismiss. If you use a local file, keep the file where OBS expects it and re-open the scene to check that it is still available. In either case, test the page after a browser refresh or a restart of OBS. A source that looks correct only in the initial setup is not ready for a long programme.
Place the overlay above the video
In the Sources panel, drag the Browser Source above the Media Source. The browser page should now be drawn on top of the video. If it appears behind the footage, check the order first; resizing the source will not correct a layer-order problem. The OBS guide to sources describes the same top-to-bottom compositing principle.
Then use the preview to position and size the browser layer. If it is a full-canvas design, fit it to the canvas. If it is a corner badge or information strip, make the source fit the intended area and place it where it does not obscure important content. You can also crop a source in OBS when the page has unused space, but cropping is not a substitute for correcting a poorly designed viewport. Keep the transform intentional so a later canvas adjustment does not leave the graphic partly off-screen.
Check transparency with moving footage beneath the overlay. A still frame may conceal an opaque rectangle if its colour happens to resemble the page background. Look for unwanted page colour, margins, scrollbars or clipping as the underlying video changes. If you see a solid block, inspect the webpage's own background and transparency rather than changing the Media Source.
A persistent programme graphic might be a channel name, a schedule label or a small now-playing panel. Keep the information useful and avoid covering captions, faces or other essential content. In a news loop, for example, a corner label should not obscure the lower-third already embedded in the video. If the video itself contains titles or subtitles, test the overlay against those sections rather than choosing its position from an empty frame.
The result is a single composed OBS output. Viewers receive the video and the overlay together as the encoder's picture; they cannot turn off the Browser Source independently. If you need a graphic to appear only at certain moments, decide how it will be controlled in OBS and rehearse the transitions. A graphic that should remain throughout a video can simply stay visible in the scene.
Test video and audio through the full programme
Before using the scene for a public stream, play the whole programme from start to finish in OBS or make a representative local recording of the complete output. Check the opening, middle, end and any loop boundary. A brief glance at the first frame will not reveal a late page failure, a file ending sooner than expected or a mismatch between the video and its audio.
Watch the overlay while the footage changes. Confirm it remains in the intended position, does not disappear, and does not cover something important later in the programme. If the browser page contains a clock, ticker or other changing element, verify that it advances and remains readable. If the page relies on an external resource, observe it long enough to catch a failed load or stale display before viewers encounter it.
Listen to the programme through OBS's monitoring or a test recording. Check that the Media Source's audio is audible, that it is not accidentally duplicated by another source, and that the beginning and end behave as intended. If the overlay includes sound, remember that a Browser Source can contribute audio too; decide whether that sound belongs in the programme and confirm the mixer reflects that decision. The graphic itself may be silent, but the test should cover the actual mix, not just the visible scene.
Use a representative test period with motion and sound, as recommended in YouTube's live streaming tips. A channel that normally carries devotional music should test a section with the music and any spoken introduction; a local news loop should check transitions between packages and any embedded audio. A still image or muted test does not establish that the live programme mix is correct.
For a long-running channel, also consider what viewers see if the file ends, OBS is restarted, or the Browser Source fails to render. Choose a deliberate fallback: a holding card, a blank scene, or a restarted video, depending on the channel's purpose. When the main pain is that your own computer must stay on for a prerecorded programme to continue, StreamNeo removes that specific burden by taking an uploaded file and running it as a YouTube live stream while your computer is off; it does not replace the need to prepare and check the programme asset.
Configure OBS for YouTube Live
In YouTube Studio, open the Live Control Room and create or select the live event. YouTube's encoder instructions describe how to obtain the stream URL and stream key for OBS. In OBS, open Settings, Stream, select the YouTube service or configure the server details as directed, and enter the credentials for that event. Treat the stream key as a secret: anyone who can use it may be able to send a feed to your channel.
The encoder feed and the public event are related but separate steps. Starting streaming in OBS sends the composed scene to YouTube; the event may still need to be started in Live Control Room. Follow the controls shown for the event, and do not assume that an OBS status indicator alone means viewers can already watch. YouTube's current instructions for creating a live stream with an encoder cover the event and encoder workflow.
Choose OBS output and video settings that suit the source footage, canvas and available connection. The focus here is the composition: the encoder should send the scene containing both the Media Source and Browser Source. For detailed bitrate or format choices, consult YouTube's current encoder guidance rather than copying a setting from an unrelated setup. The OBS CBR bitrate guide for a YouTube playlist stream addresses a separate but related configuration task.
Give the stream time to connect before you begin the event. If YouTube reports a problem, resolve it in the encoder or event setup and inspect the preview again. Do not change several settings at once without checking the result; a simple sequence—feed the scene, inspect it, correct one issue, inspect again—makes it easier to identify whether the picture, source order or connection is responsible.
Check the Live Control Room preview
Once OBS is sending the scene, inspect the preview in Live Control Room before starting the event for viewers. Confirm that the same composite you saw in OBS is arriving: footage is moving, the browser graphic is visible and in the right place, and the picture is not unexpectedly cropped or letterboxed. YouTube recommends checking the preview and stream health before and during a live broadcast in its live streaming tips.
Check audio as well as video. If the preview is silent, return to the OBS Audio Mixer and the source properties rather than assuming the local file contains a usable audio track. If the sound is present but the picture is wrong, inspect the scene and source transforms. A preview that is correct in the Control Room is a more meaningful final check than the OBS canvas alone because it confirms that YouTube is receiving the output.
Review the event details and controls before starting: title, visibility, audience settings and scheduled timing should reflect the event you intend to run. The exact interface can change, so use the current Live Control Room prompts. Once live, keep an eye on stream health and the programme itself. A correct preview at the start cannot guarantee that a long programme or connection will remain trouble-free.
Keep the distinction between a programme overlay and YouTube's break overlay clear. A Browser Source in your OBS scene is composited continuously wherever that scene is used. YouTube's built-in break-overlay flow is configured in Live Control Room for a break or switch-away state; it does not create a persistent graphic over the running programme. YouTube documents that separate feature in its break-overlay instructions.
If you are specifically setting up YouTube's break overlay, follow its own instructions for the supplied overlay URL, dimensions and visibility behaviour. A selected video slate may have an embedding requirement, and audio for the slate still needs to be part of the encoder mix if you want viewers to hear it. Those conditions belong to the break workflow, not to the OBS method for placing a persistent graphic over prerecorded footage.
If this OBS workflow is still the right fit after testing, compare the operating options before committing.
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
Can I add an OBS Browser Source to a video already uploaded to YouTube?
No. OBS composes sources into an encoder feed before YouTube receives the live video; it cannot retroactively add a layer to a finished upload. To have the graphic over prerecorded footage, play the file through OBS and send that combined output as a live stream, or edit the original video before uploading it.
Why is my Browser Source covering the whole video?
A Browser Source can fill the canvas, and its page may be drawing an opaque background. Check its width and height, the webpage's background and the layer order; a transparent page background only helps if the page leaves the relevant areas transparent. If the graphic should occupy a small area, resize and position the source in OBS after checking the page layout.
Does YouTube's break overlay keep a logo on screen throughout the programme?
No. The break overlay is a distinct Live Control Room feature for a break slate, not a persistent programme graphic. For a logo or information panel that remains over the footage, add a Browser Source to the OBS scene above the Media Source.
Should the Media Source loop?
Loop it when the programme is intended to repeat, and test the transition from its final frame back to its opening. For a one-time event, decide what viewers should see when playback ends instead of assuming the source will continue indefinitely.