The Foundation for
Anime Episode Playback

<!-- VidCloud Embed: AniList Integration -->
<!-- Route: /embed/ani/{anilistId}/{episode}?track={sub|dub}&autoSkip=1 -->
<iframe 
  src="https://vidcloud.sbs/embed/ani/21/1?track=sub&autoSkip=1" 
  width="100%" 
  height="480" 
  frameborder="0" 
  loading="lazy"
  allow="autoplay; fullscreen; picture-in-picture" 
  allowfullscreen>
</iframe>

<!-- Configuration Reference:
  • 21        : AniList Anime ID (One Piece)
  • 1         : Episode number
  • track=sub : Japanese audio + English subtitles (or track=dub for English Dub)
  • server    : Fully automatic with in-player switcher (Marin / Zexy)
  • autoSkip=1: Automatically skips opening & ending credits via AniSkip
  * NOTE: Do NOT include 'sandbox' attribute (strict anti-leech protection will block playback)
-->

<!-- VidCloud Embed: MyAnimeList (MAL) Integration -->
<!-- Route: /embed/mal/{malId}/{episode}?track={sub|dub}&autoSkip=1&autoNext=1 -->
<iframe 
  src="https://vidcloud.sbs/embed/mal/21/1?track=sub&autoSkip=1&autoNext=1" 
  width="100%" 
  height="480" 
  frameborder="0" 
  loading="lazy"
  allow="autoplay; fullscreen; picture-in-picture" 
  allowfullscreen>
</iframe>

<!-- Alternative Query Parameter Format for MAL:
<iframe 
  src="https://vidcloud.sbs/embed?type=mal&id=21&ep=1&track=sub&autoSkip=1&autoNext=1" 
  width="100%" 
  height="480" 
  frameborder="0" 
  allow="autoplay; fullscreen; picture-in-picture" 
  allowfullscreen>
</iframe>
-->

<!-- VidCloud Embed: Full Production Stack (AutoSkip + AutoPlay + AutoNext) -->
<iframe 
  src="https://vidcloud.sbs/embed/ani/21/1?track=sub&autoSkip=1&autoPlay=1&autoNext=1" 
  width="100%" 
  height="500" 
  frameborder="0" 
  loading="lazy"
  allow="autoplay; fullscreen; picture-in-picture" 
  allowfullscreen>
</iframe>

<!-- Parameters Breakdown:
  • autoSkip=1 : Detects AniSkip opening (OP) & ending (ED) cue points and skips automatically
  • autoPlay=1 : Starts playback immediately without requiring an initial user tap
  • autoNext=1 : Auto-advances to the next episode seamlessly when the current episode ends
  • server     : Fully automatic with in-player switcher (Marin / Zexy)
  • track=sub  : Original Japanese with subs (use track=dub for English dub)
-->

<!-- Responsive 16:9 Aspect Ratio Container (Desktop & Mobile) -->
<style>
  .vidcloud-player-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #09090b;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
  .vidcloud-player-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
  }
</style>

<div class="vidcloud-player-wrapper">
  <iframe 
    src="https://vidcloud.sbs/embed/ani/21/1?track=sub&autoSkip=1&autoNext=1" 
    loading="lazy"
    allow="autoplay; fullscreen; picture-in-picture" 
    allowfullscreen>
  </iframe>
</div>

import React, { useEffect } from 'react';

interface VidCloudPlayerProps {
  id?: number | string;            // AniList or MAL ID (e.g. 21)
  idType?: 'ani' | 'mal';          // 'ani' for AniList, 'mal' for MyAnimeList
  episode?: number;                // Target episode number
  track?: 'sub' | 'dub';           // Subbed or Dubbed
  autoSkip?: boolean;              // Auto skip intro / outro
  autoPlay?: boolean;              // Auto play on load
  autoNext?: boolean;              // Auto advance to next episode
  onEnded?: () => void;            // Callback when episode finishes
}

export function VidCloudPlayer({
  id = 21,
  idType = 'ani',
  episode = 1,
  track = 'sub',
  autoSkip = true,
  autoPlay = true,
  autoNext = true,
  onEnded
}: VidCloudPlayerProps) {
  useEffect(() => {
    function handleMessage(event: MessageEvent) {
      if (event.origin !== "https://vidcloud.sbs") return;
      if (event.data?.event === "ended") {
        onEnded?.();
      }
    }
    window.addEventListener("message", handleMessage);
    return () => window.removeEventListener("message", handleMessage);
  }, [onEnded]);

  const embedUrl = `https://vidcloud.sbs/embed/\${idType}/\${id}/\${episode}?track=\${track}&autoSkip=\${autoSkip ? 1 : 0}&autoPlay=\${autoPlay ? 1 : 0}&autoNext=\${autoNext ? 1 : 0}`;

  return (
    <div style={{ position: 'relative', width: '100%', aspectRatio: '16 / 9', borderRadius: 12, overflow: 'hidden', background: '#000' }}>
      <iframe
        src={embedUrl}
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 'none' }}
        allow="autoplay; fullscreen; picture-in-picture"
        allowFullScreen
      />
    </div>
  );
}

<!-- Load VidCloud Embed SDK -->
<script src="https://vidcloud.sbs/embed-sdk.js"></script>

<script>
  // 1. Generate embed URL for AniList or MAL with AutoSkip
  const anilistUrl = window.VidCloudSDK.createEmbedUrl("ani", 21, 1, "sub");
  console.log("AniList URL:", anilistUrl);
  // Output: https://vidcloud.sbs/embed/ani/21/1/sub

  const malUrl = window.VidCloudSDK.createEmbedUrl("mal", 21, 1, "sub");
  console.log("MAL URL:", malUrl);
  // Output: https://vidcloud.sbs/embed/mal/21/1/sub

  // 2. Listen to Bidirectional postMessage Player Events
  window.addEventListener("message", function(event) {
    if (event.origin !== "https://vidcloud.sbs") return;

    const data = event.data;
    switch(data?.event) {
      case "ready":
        console.log("Player initialized & ready");
        break;
      case "play":
        console.log("Video started playing");
        break;
      case "autoSkip":
        console.log("Skipped intro/outro timestamp:", data.type);
        break;
      case "ended":
        console.log("Episode completed — ready for next episode");
        break;
    }
  });
</script>