Best YouTube Widgets for Your Website

A "YouTube widget" means adding YouTube content to your own site: a single video, a whole channel feed, a playlist, or a subscribe button. Some options are free and native to YouTube, others are paid third-party services that add grids and galleries.

Create content, post everywhere

Create captions, images, and videos with AI. Schedule to 9 platforms in seconds.

Start your free trial

TL;DR

• Fastest real way to embed one video: on the video, click Share > Embed, copy the <iframe>, paste it into your page's HTML. That code uses https://www.youtube.com/embed/VIDEO_ID and works on any site.
• Want privacy? In the Embed dialog, tick "Enable privacy-enhanced mode" so the iframe uses www.youtube-nocookie.com, which holds tracking cookies until the viewer presses play.
• Whole channel or playlist: embed the Uploads (or any) playlist with https://www.youtube.com/embed?listType=playlist&list=PLAYLIST_ID.
• Subscribe button: still officially supported by Google (docs last revised April 2026). Load platform.js and drop in a g-ytsubscribe div.
• Grids, sliders, moderation: these are not native. You need a third-party widget (Elfsight, Smash Balloon for WordPress, Taggbox) or the YouTube Data API and your own layout.

Everything below is real, copy-ready code. Verify current third-party pricing on each vendor's own site before buying, since plans change often.

What Is a YouTube Widget?

A YouTube widget is an embeddable element that displays YouTube content on your website. Unlike single video embeds, widgets can:

• Show your entire channel feed
• Display specific playlists
• Update automatically with new uploads
• Match your website's design
• Include subscribe buttons

Common widget types:

• Channel feed (latest uploads)
• Playlist gallery
• Video carousel
• Video grid
• Single featured video with feed

Method 1: YouTube Native Embed (Free)

This is the method most people actually need, and it costs nothing.

Embed a Single Video

Open the video, click Share > Embed, and copy the code. It looks like this:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen>
</iframe>

Replace VIDEO_ID with the 11-character ID from the watch URL (youtube.com/watch?v=VIDEO_ID).

Current Player Parameters That Still Work

Add these to the embed URL after a ?, joined with &. These are confirmed in Google's Embedded Player Parameters reference:

Example combining several:

<iframe
  width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID?start=30&mute=1&rel=0"
  title="YouTube video player" frameborder="0"
  allow="autoplay; encrypted-media; picture-in-picture"
  allowfullscreen>
</iframe>

Privacy-Enhanced Mode (youtube-nocookie.com)

If you care about cookie consent (GDPR/ePrivacy), tick "Enable privacy-enhanced mode" in the Share > Embed dialog, or just swap the domain to www.youtube-nocookie.com. YouTube then holds tracking cookies until the visitor actually clicks play:

<iframe
  width="560" height="315"
  src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
  title="YouTube video player" frameborder="0"
  allow="encrypted-media; picture-in-picture"
  allowfullscreen>
</iframe>

This domain is still current and is Google's own recommended option for reducing pre-play tracking.

Embed a Channel Feed or Playlist

YouTube has no direct "channel grid" widget, but you can embed any playlist, including your auto-created Uploads playlist, so it updates as you post:

1. Open the playlist and copy its ID from the URL (&list=PLAYLIST_ID).
2. Use the current documented playlist embed format:

<iframe
  width="560" height="315"
  src="https://www.youtube.com/embed?listType=playlist&list=PLAYLIST_ID"
  title="YouTube playlist" frameborder="0"
  allowfullscreen>
</iframe>

The older youtube.com/embed/videoseries?list=PLAYLIST_ID URL still works, but the listType=playlist form above is the one Google documents today.

Limitation: this shows a playlist player, not a visual grid. For grids and galleries you need Method 2 or 5.

Subscribe Button Widget

The YouTube Subscribe Button is still officially supported. Google's reference guide was last revised in April 2026. Load the script once, then drop in a div:

<div class="g-ytsubscribe" data-channelid="YOUR_CHANNEL_ID" data-layout="default" data-count="default"></div>
<script src="https://apis.google.com/js/platform.js"></script>

Supported attributes: data-channelid or data-channel (the channel), data-layout (default or full), data-theme (default or dark), and data-count (default or hidden). Note that the old subscribe/unsubscribe JavaScript events and the data-ytonevent attribute have been deprecated, so you can no longer listen for a subscribe action in code.

Method 2: Elfsight YouTube Widget

Best for: Beautiful, customizable widgets without coding

Features

• Video grid, slider, and gallery layouts
• Auto-updates with new uploads
• Customizable colors and fonts
• Lightbox video playback
• Works on any website

Pricing

Elfsight runs a free tier with a monthly view cap plus tiered paid plans (roughly a few dollars a month up to a higher unlimited tier), with limits based on widget count and monthly views. Plans and caps change regularly, so check the current numbers on the Elfsight pricing page before you commit.

Setup

1. Go to Elfsight.com
2. Select YouTube widget
3. Enter your channel URL
4. Customize design
5. Copy embed code
6. Paste on your website

Method 3: Smash Balloon (WordPress)

Best for: WordPress users wanting deep customization

Features

• Multiple layout options
• Display videos, playlists, or live streams
• WooCommerce integration
• SEO-friendly
• Caching for speed

Pricing

Smash Balloon sells its YouTube Feed as an annual license (single-site and multi-site tiers), and also bundles all its social feed plugins in an All Access license. Pricing shifts with sales and renewals, so confirm the current figures on the Smash Balloon site. There is also a free "Feeds for YouTube" plugin in the WordPress directory with a limited feature set.

Setup

1. Install Smash Balloon plugin
2. Connect YouTube account
3. Create feed with shortcode
4. Add to pages/posts

[youtube-feed]

Method 4: Taggbox Widget

Best for: Combining multiple video sources

Features

• YouTube + other platforms
• Moderation tools
• Analytics dashboard
• Custom CSS support
• Live streaming support

Pricing

Taggbox (now marketed as Tagembed) offers a limited free tier and several paid monthly plans that scale by widget count, views, and features. Check current tiers on the Taggbox pricing page, since the plan names and prices change often.

Method 5: Custom YouTube API

Best for: Developers wanting full control

Basic Implementation

<div id="youtube-feed"></div>
 
<script>
const API_KEY = 'YOUR_API_KEY';
const CHANNEL_ID = 'YOUR_CHANNEL_ID';
 
fetch(`https://www.googleapis.com/youtube/v3/search?key=${API_KEY}&channelId=${CHANNEL_ID}&part=snippet&order=date&maxResults=6`)
  .then(response => response.json())
  .then(data => {
    const container = document.getElementById('youtube-feed');
    data.items.forEach(video => {
      container.innerHTML += `
        <div class="video-item">
          <a href="https://youtube.com/watch?v=${video.id.videoId}">
            <img src="${video.snippet.thumbnails.medium.url}" alt="${video.snippet.title}">
            <h3>${video.snippet.title}</h3>
          </a>
        </div>
      `;
    });
  });
</script>
 
<style>
#youtube-feed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.video-item img {
  width: 100%;
  border-radius: 8px;
}
</style>

Get YouTube API Key

1. Go to Google Cloud Console
2. Create new project
3. Enable YouTube Data API v3
4. Create credentials (API key)
5. Restrict key to your domain

API quotas: Free tier allows 10,000 units/day. Each search costs 100 units = 100 searches/day max.

Platform-Specific Setup

WordPress

Options:

1. Smash Balloon (plugin) - Best for WordPress
2. Elfsight (HTML embed) - Works anywhere
3. YouTube Showcase (free plugin) - Basic grids

Smash Balloon setup:

1. Install "Feeds for YouTube" plugin
2. Connect YouTube account
3. Use shortcode: [youtube-feed]
4. Customize in plugin settings

Wix

1. Click Add → Embed → Custom Embed
2. Select Embed a Widget
3. Paste widget code from Elfsight/Taggbox
4. Position and resize

Squarespace

1. Add Code Block
2. Paste widget embed code
3. Style with custom CSS if needed

Shopify

1. Go to Online Store → Themes → Edit Code
2. Add widget code to relevant template
3. Or use Shopify app (Elfsight YouTube Gallery)

Webflow

1. Add Embed element
2. Paste widget code
3. Set responsive breakpoints

Widget Layouts Compared

Performance Optimization

Lazy Loading

Load widget only when visible:

<div id="youtube-widget" data-src="WIDGET_CODE"></div>
 
<script>
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.innerHTML = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
});
observer.observe(document.getElementById('youtube-widget'));
</script>

Caching (Custom API)

Cache API responses to avoid quota limits:

// Check cache first
const cached = localStorage.getItem('youtube-feed');
if (cached && Date.now() - JSON.parse(cached).timestamp < 3600000) {
  renderVideos(JSON.parse(cached).data);
} else {
  fetchYouTubeData().then(data => {
    localStorage.setItem('youtube-feed', JSON.stringify({
      data: data,
      timestamp: Date.now()
    }));
    renderVideos(data);
  });
}

Common Issues & Fixes

Widget Not Loading

Causes:

• JavaScript blocked
• Ad blocker interference
• Incorrect channel/playlist ID

Fixes:

• Test in incognito mode
• Verify IDs are correct
• Check browser console for errors

Videos Not Updating

Causes:

• Caching (browser or CDN)
• API quota exceeded
• Widget service delay

Fixes:

• Clear cache
• Check widget service status
• Wait 15-30 minutes for YouTube's API

Slow Page Load

Causes:

• Widget loading synchronously
• Too many videos displayed
• No lazy loading

Fixes:

• Add lazy loading
• Limit videos shown (6-12 max)
• Use async script loading

Widget Selection Checklist

• Budget: Free, one-time, or monthly?
• Platform: WordPress, Wix, custom HTML?
• Layout: Grid, carousel, list?
• Traffic: Low (<10K/mo) or high?
• Updates: Manual or automatic?
• Customization: Basic or advanced?

Quick Comparison

Frequently Asked Questions

Related Resources

YouTube Guides:

• Embed YouTube Playlist
• YouTube SEO Checklist
• Benefits of YouTube for Business
• Best Days to Post on YouTube

Social Media Widgets:

• Embed Instagram Feed
• Twitter Wall Display Guide
• Social Media Aggregator Guide

Website Tools:

• Link in Bio Strategy