YouTube Channel Directory with banner.yt API

What We Are Building

A searchable directory of YouTube channels with live banners and avatars, subscriber counts, and links to each channel. No YouTube API key required — everything goes through banner.yt.

The Data You Get for Free

The /api/channel/[channelId] endpoint returns:

Channel name, handle, description
Subscriber count, total view count, video count
Verification status, country, join date
Direct URLs for banner (4 sizes) and avatar
All external links from the channel page

HTML Structure

<div class="channel-card">
  <img class="banner"
       src="https://banner.yt/api/banner/CHANNEL_ID?type=mobile&format=webp"
       alt="Channel Banner" />
  <div class="channel-info">
    <img class="avatar"
         src="https://banner.yt/api/banner/CHANNEL_ID?type=avatar&format=webp"
         alt="Channel Avatar" />
    <h2 id="channel-name"></h2>
    <p id="subscriber-count"></p>
  </div>
</div>

Fetching Channel Data

async function loadChannel(channelId) {
  const res = await fetch(
    `https://banner.yt/api/channel/${channelId}`
  );
  const data = await res.json();

  document.getElementById('channel-name').textContent = data.name;
  document.getElementById('subscriber-count').textContent =
    `${Number(data.subscribers).toLocaleString()} subscribers`;
}

Search Integration

async function searchChannels(query) {
  const res = await fetch(
    `https://banner.yt/api/search?q=${encodeURIComponent(query)}`
  );
  const { results } = await res.json();
  // results is an array of { channelId, title, avatar, description }
  return results;
}

CSS for a Clean Card Layout

.channel-card {
  border-radius: 12px;
  overflow: hidden;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.08);
}

.channel-card .banner {
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
}

.channel-card .avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.1);
  margin-top: -30px;
  position: relative;
}

Rate Limit Handling

The banner.yt API allows 10 requests per 30 seconds. For a directory with many channels, batch your requests and add a small delay between fetches:

async function loadChannelsBatched(channelIds) {
  const results = [];
  for (let i = 0; i < channelIds.length; i++) {
    results.push(await loadChannel(channelIds[i]));
    if (i % 5 === 4) await new Promise(r => setTimeout(r, 3000));
  }
  return results;
}

Next Steps

From here you can add: filtering by category, sorting by subscriber count, a favorites list saved in localStorage, or a backend that pre-fetches all channels nightly and stores the data in a database for instant page loads.