How to Use the banner.yt API in JavaScript

Using the banner.yt API in JavaScript

The banner.yt API is a plain HTTP API. No SDK needed, no API key, no auth headers. You just make a GET request to a URL and get back either an image or JSON data.

Basic image embed

The simplest thing you can do is use the banner URL directly in an img tag:

<img
  src="https://banner.yt/api/banner/UCX6OQ3DkcsbYNE6H8uQQuVA"
  alt="MrBeast YouTube banner"
/>

That returns a WebP image at 2560x1440. If you want a different format or size:

<!-- AVIF, mobile crop -->
<img src="https://banner.yt/api/banner/UCX6OQ3DkcsbYNE6H8uQQuVA?format=avif&type=mobile" />

<!-- Avatar -->
<img src="https://banner.yt/api/banner/UCX6OQ3DkcsbYNE6H8uQQuVA?type=avatar" />

<!-- Custom size -->
<img src="https://banner.yt/api/banner/UCX6OQ3DkcsbYNE6H8uQQuVA?width=800&height=200" />

Fetching channel data as JSON

Use the channel endpoint to get subscriber counts, view counts, description, and all banner URLs in one response:

const res = await fetch('https://banner.yt/api/channel/UCX6OQ3DkcsbYNE6H8uQQuVA');
const channel = await res.json();

console.log(channel.title);           // MrBeast
console.log(channel.subscriberCount); // 340000000
console.log(channel.viewCount);       // ...
console.log(channel.bannerUrl);       // https://banner.yt/api/banner/...
console.log(channel.avatarUrl);       // https://banner.yt/api/banner/...?type=avatar

Searching for channels

const res = await fetch('https://banner.yt/api/search?q=MrBeast');
const data = await res.json();

data.results.forEach(ch => {
  console.log(ch.channelId, ch.title);
});

Finding a channel by @handle

const res = await fetch('https://banner.yt/api/channel/mrbeast?type=handle');
const channel = await res.json();

Using in a React component

function ChannelBanner({ channelId }: { channelId: string }) {
  return (
    <img
      src={`https://banner.yt/api/banner/${channelId}?format=webp&type=mobile`}
      alt="YouTube channel banner"
      style={{ width: '100%', borderRadius: 8 }}
    />
  );
}

Handling errors

If a channel has no banner, the API returns a placeholder gray banner instead of an error. The request still returns 200 so your UI never breaks.

Rate limit is 10 requests per 30 seconds per IP. If you need bulk access, batch requests and add a small delay between them.

Caching and performance

The API sends back Cache-Control: public, max-age=86400 on all image responses. Browsers and CDNs will cache them for 24 hours. For best performance on your site, add lazy loading to img tags and consider serving the bandwidth through your own CDN proxy if you have high traffic.