Bunny Video Shortcode Guide

Overview

The legacy Clappr-based stack has been removed in favour of Bunny.net’s native iframe player.
Use the {{video …}} shortcode to render either a single video or a lightweight playlist—all sourced from Bunny Stream.

• Single video: requires a videoId and libraryId.
• Playlist: provide the Bunny library plus a JSON array of video entries.
• Optional flags control autoplay, muted playback, looping, aspect ratio, and custom classes.

Single Video

{{video
  videoId="YOUR_VIDEO_GUID"
  libraryId="YOUR_LIBRARY_ID"
  title="Welcome / Orientation"
  autoplay="true"
  muted="true"
  aspectRatio="16/9"
}}

Attributes

• videoId (required) – Bunny Stream video GUID.
• libraryId (required) – Bunny Stream library ID.
• title – Accessible title for the iframe.
• autoplay, muted, loop – Boolean flags (true / false).
• token – Embed view token if the library requires signed access.
• aspectRatio – Defaults to 16/9; accepts any width/height pair (e.g. 4/3).
• className – Extra classes applied to the outer container.

Missing IDs render an inline warning so the page clearly shows misconfigured embeds while you edit.

Playlist

{{video
  libraryId="YOUR_LIBRARY_ID"
  autoplay="false"
  muted="true"
  heading="Team Training Series"
  playlist='[
    {"id":"VIDEO_GUID_1","title":"Session 1 — Orientation"},
    {"id":"VIDEO_GUID_2","title":"Session 2 — Prospecting"},
    {"id":"VIDEO_GUID_3","title":"Session 3 — Closing"}
  ]'
}}

Playlist tips

• Each playlist item must include an id. Optional fields: title, description, thumbnail, token.
• Use single quotes around the JSON string inside the shortcode so double quotes stay valid.
• autoplay, muted, loop, aspectRatio, and className mirror the single-video behaviour and apply to the playlist player.
• The component automatically highlights the active video and swaps the iframe source—no external player library is required.

Direct Component Imports (MDX)

If you prefer MDX components over shortcodes, import the new Astro components directly:

import BunnyVideo from '@components/bunny/BunnyVideo.astro';
import BunnyPlaylist from '@components/bunny/BunnyPlaylist.astro';

<BunnyVideo videoId="GUID" libraryId="12345" autoplay />

<BunnyPlaylist
  libraryId="12345"
  videos={[
    { id: 'GUID-1', title: 'Intro' },
    { id: 'GUID-2', title: 'Deep Dive' }
  ]}
/>

Embed Tokens

For protected libraries, generate a view token server-side and pass it through the shortcode via token="...". The token is appended to the iframe URL automatically.

Troubleshooting

• Empty player: Confirm both videoId and libraryId are present (or that the playlist array contains valid IDs).
• Playlist item skipped: Ensure each item supplies an id. Invalid entries are ignored with a console warning.
• Autoplay blocked: Browsers require muted="true" when autoplay="true".
• Signed embeds: Tokens expire—refresh them in your content or generate on the fly if you are rendering pages at request time.