Embedding YouTube Banners on Your Website

The banner.yt API returns image files directly, so you can embed them anywhere you can put an image URL. Here are the main ways to do it.

Method 1: Plain HTML img tag

The simplest approach. Just use the API URL as the src:

<img
  src="https://banner.yt/api/banner/UCX6OQ3DkcsbYNE6H8uQQuVA"
  alt="MrBeast YouTube banner"
  style="width: 100%; border-radius: 8px;"
  loading="lazy"
/>

This loads a WebP image at 2560x1440. It scales to its container width automatically.

Method 2: Responsive banner with mobile crop

Use different crops for different screen sizes with the HTML picture element:

<picture>
  <source
    media="(max-width: 600px)"
    srcset="https://banner.yt/api/banner/UCX6OQ3DkcsbYNE6H8uQQuVA?type=mobile"
  />
  <source
    media="(max-width: 1200px)"
    srcset="https://banner.yt/api/banner/UCX6OQ3DkcsbYNE6H8uQQuVA?type=tablet"
  />
  <img
    src="https://banner.yt/api/banner/UCX6OQ3DkcsbYNE6H8uQQuVA"
    alt="Channel banner"
    style="width: 100%;"
    loading="lazy"
  />
</picture>

Method 3: Channel card widget

A full channel card with banner, avatar, name, and subscriber count using the JSON API:

<div id="yt-channel-card">Loading...</div>
<script>
async function loadChannelCard(channelId) {
  const res = await fetch(`https://banner.yt/api/channel/${channelId}`);
  const ch = await res.json();

  const card = document.getElementById('yt-channel-card');
  card.innerHTML = `
    <div style="border-radius:12px;overflow:hidden;border:1px solid #333;background:#111;max-width:560px;">
      <img src="https://banner.yt/api/banner/${channelId}" style="width:100%;display:block;" loading="lazy" />
      <div style="display:flex;align-items:center;gap:12px;padding:12px;">
        <img src="https://banner.yt/api/banner/${channelId}?type=avatar" width="48" height="48"
             style="border-radius:50%;" />
        <div>
          <div style="font-weight:bold;color:#fff;">${ch.title}</div>
          <div style="font-size:13px;color:#aaa;">${formatSubs(ch.subscriberCount)} subscribers</div>
        </div>
      </div>
    </div>
  `;
}

function formatSubs(n) {
  if (!n) return '—';
  const num = parseInt(n);
  if (num >= 1e9) return (num/1e9).toFixed(1) + 'B';
  if (num >= 1e6) return (num/1e6).toFixed(1) + 'M';
  if (num >= 1e3) return (num/1e3).toFixed(1) + 'K';
  return num;
}

loadChannelCard('UCX6OQ3DkcsbYNE6H8uQQuVA');
</script>

WordPress

Add a Custom HTML block in the Gutenberg editor and paste any of the above snippets. It works without any plugin.

Notion

Notion embeds images by URL. Create a new block, type /image, choose embed, and paste the banner URL.

Use the embed builder

We have an embed builder that generates the HTML for you. Pick a channel, pick a style, copy the code.