Epic Panda YouTube embed — examples

Static file: /widgets.html · Script: /embed.js · API: /api/youtube

Pattern: assign window.EmbedKingYtWidgetConfig before loading embed.js. apiBaseUrl is optional; if omitted, the script uses the origin of the <script src="…/embed.js"> URL (works when your site loads the script from this Vercel deployment).

Carousel markup: carouselMode: "manual" — you provide HTML (below). "html" — set carouselHtml into carouselRoot. "default" — set defaultWidget (links, labels, logo) into carouselRoot. API token: set apiToken to a value allowed by the server (lib/embed-tokens.ts).

Live demo — carousel only (RSS + /api/youtube, no browser API key)

carouselMode: "manual" (default): markup is already in the page; optional carouselRoot: ".ytw-container".

Example — carouselMode: "default" (generated HTML)

<div id="yt-embed"></div>
<script>
  window.EmbedKingYtWidgetConfig = {
    apiBaseUrl: 'https://embedking-youtube.ego-348.workers.dev',
    apiToken: 'YOUR_EMBED_TOKEN',
    carouselRoot: '#yt-embed',
    carouselMode: 'default',
    defaultWidget: {
      channelUrl: 'https://www.youtube.com/channel/CHANNEL_ID',
      channelVideosUrl: 'https://www.youtube.com/@handle/videos',
      logoSrc: '/images/logo.webp',
      logoAlt: 'Channel',
      titleText: 'My channel',
      subscribeLabel: 'Subscribe',
      channelButtonLabel: 'Go to channel',
      statsLoadingText: ''
    }
  };
</script>
<script src="https://embedking-youtube.ego-348.workers.dev/embed.js" async></script>

Example — carouselMode: "html" (paste HTML string)

<div id="yt-embed"></div>
<script>
  window.EmbedKingYtWidgetConfig = {
    apiBaseUrl: 'https://embedking-youtube.ego-348.workers.dev',
    apiToken: 'YOUR_EMBED_TOKEN',
    carouselRoot: '#yt-embed',
    carouselMode: 'html',
    carouselHtml: `<section class="ytw-container">...your full markup...</section>`
  };
</script>
<script src="https://embedking-youtube.ego-348.workers.dev/embed.js" async></script>

Example — embed on another site (foreign script)

Replace embedking-youtube.ego-348.workers.dev with your deployment host.

<script>
  window.EmbedKingYtWidgetConfig = {
    apiBaseUrl: 'https://embedking-youtube.ego-348.workers.dev',
    apiToken: 'YOUR_EMBED_TOKEN'
  };
</script>

<!-- Your markup: .ytw-container, #ytw-stats, .ytw-video-item, #ytw-left, #ytw-right, … -->

<script src="https://embedking-youtube.ego-348.workers.dev/embed.js" async></script>

Example — playlists + optional stats (YouTube Data API key in page)

Requires youtubeApiKey and channelId for playlist items and #yt-info. Each entry in playlistIds maps to #playlist-1, #playlist-2, … inside a .carousel-row with .arrow-left / .arrow-right.

<script>
  window.EmbedKingYtWidgetConfig = {
    apiBaseUrl: 'https://embedking-youtube.ego-348.workers.dev',
    apiToken: 'YOUR_EMBED_TOKEN',
    youtubeApiKey: 'YOUR_YOUTUBE_DATA_API_KEY',
    channelId: 'UCTkTmwfO1aCgoFh3lqW14Fw',
    playlistIds: [
      'PLxxxxxxxxxxxxxxxx',  // renders into #playlist-1
      'PLyyyyyyyyyyyyyyyy',  // renders into #playlist-2
      'PLzzzzzzzzzzzzzzzz',
      'PLaaaaaaaaaaaaaaaa'
    ]
  };
</script>

<p id="yt-info"></p>

<div class="carousel-row">
  <button type="button" class="arrow-left">◀</button>
  <div id="playlist-1"></div>
  <button type="button" class="arrow-right">▶</button>
</div>

<div class="carousel-row">
  <button type="button" class="arrow-left">◀</button>
  <div id="playlist-2"></div>
  <button type="button" class="arrow-right">▶</button>
</div>

<!-- repeat for #playlist-3, #playlist-4 if needed -->

<script src="https://embedking-youtube.ego-348.workers.dev/embed.js" async></script>

Optional — call init() after load

<script src="https://embedking-youtube.ego-348.workers.dev/embed.js" async></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    window.EmbedKingYoutube && window.EmbedKingYoutube.init({
      apiBaseUrl: 'https://embedking-youtube.ego-348.workers.dev',
      apiToken: 'YOUR_EMBED_TOKEN',
      youtubeApiKey: 'YOUR_KEY',
      channelId: 'YOUR_CHANNEL_ID',
      playlistIds: ['PL…']
    });
  });
</script>