ReelsEmbed

ReelsEmbed renders a scrollable thumbnail grid. Clicking any thumbnail opens a full-screen vertical snap player with swipe, scroll, and keyboard navigation. Only the active video is mounted at a time — the rest remain as thumbnails until selected.

API-driven

Fetches a playlist from the SEEEN API. Aspect ratio is read from each video’s metadata and applied automatically.

import { ReelsEmbed } from "@seeen/embed/reels";

<ReelsEmbed apiKey="YOUR_API_KEY" playlistId="284" />

Pre-fetched

Supply a videos array directly when you already have the data.

import { ReelsEmbed } from "@seeen/embed/reels";

<ReelsEmbed
  videos={[
    {
      id: "1",
      title: "Clip 1",
      src: "https://example.com/clip1.m3u8",
      poster: "https://example.com/clip1-thumb.jpg",
      aspectRatio: "9:16",
    },
    {
      id: "2",
      title: "Clip 2",
      src: "https://example.com/clip2.m3u8",
      poster: "https://example.com/clip2-thumb.jpg",
      aspectRatio: "9:16",
    },
  ]}
/>

Player navigation

Once a video is open:

Action	Result
Swipe up / scroll down	Next video
Swipe down / scroll up	Previous video
↑ / ↓ arrow keys	Previous / next video
← / → arrow keys	Previous / next video
Escape	Close player, return to grid
✕ button	Close player, return to grid
▲ / ▼ chevrons	Previous / next video

Props

Prop	Type	Required	Description
maxVideos	number	optional	Maximum number of videos to show. Applies to both modes; in API-driven mode, pagination stops once the limit is reached. Leave unset for no limit.
overlays	CtaOverlay[]	optional	CTA image overlays applied to every video in the player.
pageSize	number	optional	Number of videos to fetch per page in API-driven mode. Defaults to 30. Ignored in pre-fetched mode.