Live YouTube Banners in OBS

OBS Browser Source accepts any URL and renders it as an overlay. You can use the banner.yt API URL directly as a browser source to show a live YouTube channel banner in your stream.

Simple image overlay

Open OBS and click the + button under Sources
Choose Browser
Set the URL to: https://banner.yt/api/banner/CHANNEL_ID?format=webp
Set Width to 1920, Height to 200 or whatever fits your layout
Click OK

The banner will show in your scene. Resize and position it like any other source.

Channel card overlay with HTML

Create a new file called overlay.html on your computer:

<!DOCTYPE html>
<html>
<head>
<style>
  body { margin: 0; background: transparent; }
  .card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(0,0,0,0.75);
    border-radius: 10px;
    border-left: 3px solid #ff0000;
    font-family: -apple-system, sans-serif;
    color: white;
    width: fit-content;
  }
  img.avatar { width: 44px; height: 44px; border-radius: 50%; }
  .name { font-weight: bold; font-size: 15px; }
  .subs { font-size: 12px; color: #aaa; margin-top: 2px; }
</style>
</head>
<body>
<div class="card" id="card"></div>
<script>
const CHANNEL_ID = 'UCX6OQ3DkcsbYNE6H8uQQuVA';

async function load() {
  const res = await fetch(`https://banner.yt/api/channel/${CHANNEL_ID}`);
  const ch = await res.json();

  const n = parseInt(ch.subscriberCount || 0);
  const subs = n >= 1e6 ? (n/1e6).toFixed(1)+'M subs'
             : n >= 1e3 ? (n/1e3).toFixed(1)+'K subs'
             : n + ' subs';

  document.getElementById('card').innerHTML = `
    <img class="avatar" src="https://banner.yt/api/banner/${CHANNEL_ID}?type=avatar&format=webp" />
    <div>
      <div class="name">${ch.title}</div>
      <div class="subs">${subs}</div>
    </div>
  `;
}
load();
setInterval(load, 60000); // refresh every minute
</script>
</body>
</html>

In OBS, add a Browser source and set the URL to the local file path: file:///path/to/overlay.html

Set background to transparent (check the Custom CSS option and add body { background: rgba(0,0,0,0); }).

Streamlabs and StreamElements

Both platforms let you add a Custom Widget or Browser Source. Paste the overlay.html content directly into the widget editor.