Embedding a YouTube Banner in Webflow

Webflow lets you drop raw HTML anywhere using an Embed element. That is all you need to show a live YouTube channel banner that auto-updates whenever the channel updates theirs.

Step 1: Get Your Channel ID

Your channel ID starts with UC and is 24 characters long. Find it by going to your YouTube channel page, clicking the three dots, and selecting "Copy channel ID". Or use the banner.yt search to look yourself up.

Step 2: Add an HTML Embed in Webflow

In the Webflow Designer, drag in an HTML Embed component from the element panel. Paste this code:

<a href="https://www.youtube.com/channel/YOUR_CHANNEL_ID"
   target="_blank" rel="noopener">
  <img
    src="https://banner.yt/api/banner/YOUR_CHANNEL_ID?type=mobile&format=webp"
    alt="My YouTube Channel Banner"
    style="width:100%;border-radius:8px;display:block;"
    loading="lazy"
  />
</a>

Replace YOUR_CHANNEL_ID with your actual ID.

Step 3: Getting the Right Size

Use type=mobile for most layouts — it returns the 1280×720 crop which works well in column widths up to about 900px. For a full-width hero, use the default (no type parameter) which returns the full 2560×1440 image.

For Webflow CMS Collections

If you have a CMS collection with YouTube channel IDs stored in a field, you can use Webflow's dynamic embed. In the Embed element, use the CMS field binding to build the URL dynamically:

<img src="https://banner.yt/api/banner/{{wf {"path":"channel-id"} }}&format=webp"
     alt="{{wf {"path":"channel-name"} }} YouTube Banner"
     style="width:100%;" />

Caching

Banners are cached for 24 hours at banner.yt. If a channel updates their banner and you need to force a refresh, append a version parameter: &v=2.