Bunny Stream Video Guide

Complete reference for creating and integrating video content using Bunny Stream’s native iframe player with live working examples.

🎯 Quick Start

Basic Video Embed

<BunnyVideo
  videoId="YOUR_VIDEO_GUID"
  libraryId="YOUR_LIBRARY_ID"
  title="Video Title"
  aspectRatio="16/9"
/>

Playlist Embed

<BunnyPlaylist
  libraryId="YOUR_LIBRARY_ID"
  heading="Training Series"
  videos={[
    {id: "VIDEO_GUID_1", title: "Session 1 — Introduction"},
    {id: "VIDEO_GUID_2", title: "Session 2 — Deep Dive"}
  ]}
/>

📋 Required Information

For each video, you’ll need:

1. Video Library ID: Your Bunny Stream library identifier
2. Video ID: The unique GUID for each video
3. Video Metadata: Title, description (optional but recommended)

Getting Your Video IDs

1. Log into your Bunny Stream Dashboard
2. Navigate to your video library
3. Select a video to view its details
4. Copy the Video Library ID and Video ID from the embed section

🎬 Live Examples

This section demonstrates actual working video embeds. These are real video players that you can interact with.

Single Video Players

Standard Player

Autoplay Player

Playlist Players

Overcome Objections Collection

Overcome Objections Collection

• Overcoming ObjectionsLearn how to effectively handle and overcome common objections in sales conversations
• Yeah but..How to respond to the 'Yeah but...' objection with confidence
• Where do you find your clients?Addressing questions about client acquisition strategies
• What is it?Explaining your services clearly when clients ask 'What is it?'
• Is this commission or salary?Explaining compensation structure to potential clients
• Is there a fee to join?Addressing questions about membership or startup fees
• I've had this policy for a long time!Handling the long-term customer loyalty objection
• I want to think it over!Effective responses to the 'I need to think about it' stall
• I'm not interested!How to engage prospects who say they're not interested
• I want to shop around!Responding to comparison shopping objections
• I want to do my own research!Supporting clients who want to do independent research
• I spoke to somebody who was in Primerica already!Handling objections based on others' experiences
• I have insurance at work!Addressing the workplace insurance objection
• I don't have time!Overcoming the 'no time' objection effectively

⚙️ Component Options

BunnyVideo Component

Required Props:

• videoId: Bunny Stream video GUID
• libraryId: Bunny Stream library ID

Optional Props:

• title: Accessible title for the iframe
• token: Embed view token for protected content
• autoplay: Boolean (default: false)
• muted: Boolean (default: false, but true if autoplay is true)
• loop: Boolean (default: false)
• aspectRatio: String (default: “16/9”, accepts “width/height” format)
• responsive: Boolean (default: true)
• className: Custom CSS classes

Examples:

<!-- Basic video -->
<BunnyVideo videoId="abc123" libraryId="456789" />

<!-- With custom settings -->
<BunnyVideo
  videoId="abc123"
  libraryId="456789"
  title="Welcome Video"
  aspectRatio="4/3"
  autoplay muted
/>

BunnyPlaylist Component

Required Props:

• libraryId: Bunny Stream library ID
• videos: Array of playlist items

Optional Props:

• heading: String for playlist heading
• initialIndex: Number (default: 0)
• autoplay: Boolean (default: false)
• muted: Boolean (default: false, but true if autoplay is true)
• loop: Boolean (default: false)
• aspectRatio: String (default: “16/9”)
• className: Custom CSS classes

Playlist Item Format:

{
  id: string;           // Required: Video GUID
  title?: string;       // Optional: Display title
  description?: string;  // Optional: Description text
  token?: string;       // Optional: Access token
}

🎨 Styling & Features

Player Features Comparison

Feature	Single Player	Playlist Player
Video Count	1 video	Multiple videos
Controls	Standard video controls	Video list + standard controls
Navigation	Basic seek bar	Playlist navigation + seek bar
Use Case	Individual content	Multi-part series
UI Layout	Single video player	Video + compact scrolling list

Enhanced Playlist UI

Our playlist component includes:

• Compact scrolling interface - Fixed height list for space efficiency
• Smooth auto-scroll - Selected videos automatically scroll into view
• Custom styled scrollbar - Matches site theme with teal accents
• Enhanced hover effects - Interactive animations and visual feedback
• Responsive design - Adapts to different screen sizes
• Active state highlighting - Clear indication of current video

Styling Options

<!-- With custom CSS classes -->
<BunnyVideo
  videoId="abc123"
  libraryId="456789"
  className="featured-video shadow-lg rounded-xl"
/>

Aspect Ratios

<BunnyVideo
  videoId="abc123"
  libraryId="456789"
  aspectRatio="16/9"  {/* Standard widescreen */}
/>

<BunnyVideo
  videoId="abc123"
  libraryId="456789"
  aspectRatio="4/3"   {/* Standard TV */}
/>

<BunnyVideo
  videoId="abc123"
  libraryId="456789"
  aspectRatio="1/1"   {/* Square */}
/>

🔐 Role-Based Access Control

Videos automatically inherit access control from their containing page:

• Guest: Public-facing videos (welcome, introductory content)
• Member: Basic training and informational videos
• CoreTeam: Advanced sales techniques, strategy videos
• Admin: System training, administrative content

Access Level Examples

<!-- Public welcome video - accessible to everyone -->
---
title: "Welcome to Our Platform"
roles: ["Guest"]
---

<BunnyVideo
  videoId="welcome-video-guid"
  libraryId="124653"
  title="Welcome Video"
/>

<!-- Core team training - restricted access -->
---
title: "Advanced Sales Techniques"
roles: ["CoreTeam", "Admin"]
---

<BunnyVideo
  videoId="advanced-training-guid"
  libraryId="124653"
  title="Advanced Training"
/>

📱 Responsive Design

• Videos automatically adapt to container width
• Maintain aspect ratio (16:9 by default)
• Work on mobile and desktop devices
• Support custom aspect ratios
• Touch-friendly playlist navigation

🚀 Performance & Best Practices

Performance Considerations

1. Lazy Loading: Videos load only when scrolled into view (automatic)
2. Autoplay: Use sparingly to improve page load performance
3. Responsive Design: Automatic adaptation to screen sizes

Content Best Practices

1. Plan Content Structure: Map out where videos fit in your content hierarchy
2. Use Appropriate Access Levels: Match video sensitivity to role permissions
3. Provide Context: Always include text explanations alongside videos
4. Test Thoroughly: Verify videos work across devices and user roles
5. Keep URLs Current: Verify video IDs periodically as content evolves

🔧 Technical Configuration

Current Setup

• Library ID: 124653
• Source: Bunny Stream
• Features: Responsive design, click navigation, smooth scrolling
• Playlist UI: Compact scrolling list with custom scrollbar
• Component Architecture: Astro-based with role-based access control

URL Formats

Iframe Embed URL:

https://iframe.mediadelivery.net/embed/{libraryId}/{videoId}?autoplay=false&muted=true

Bunny Stream Dashboard:

• Library: https://dash.bunny.net/stream/{libraryId}/library
• Video Details: https://dash.bunny.net/stream/{libraryId}/library/videos/{videoId}

🛠 Troubleshooting

Common Issues

1. Video Not Loading: Check your Video Library ID and Video ID
2. Access Denied: Verify the page’s role permissions match intended audience
3. Poor Quality: Ensure your Bunny Stream videos are properly encoded
4. Slow Loading: Consider network conditions and file sizes

Error Handling

The components provide inline error messages when:

• Required videoId or libraryId is missing
• Playlist items are missing required IDs
• Invalid configuration is detected

Getting Help

• Video IDs: Check your Bunny Stream dashboard
• Access Problems: Test with different user roles
• Component Errors: Check browser console for specific error messages
• Performance: Use browser dev tools to analyze video loading

📚 Quick Reference

Component Syntax

<BunnyVideo videoId="GUID" libraryId="LIBRARY_ID" [options] />
<BunnyPlaylist libraryId="LIBRARY_ID" videos={[{id: "GUID", title: "Title"}]} [options] />

Required Props

• videoId: Bunny Stream video GUID
• libraryId: Bunny Stream library ID

Most Common Optional Props

• title: Video title
• aspectRatio: “16/9”, “4/3”, “1/1”
• autoplay: true/false
• muted: true/false
• videos: Array for playlists
• heading: Playlist title

---

Note: Access to these videos is controlled by the page’s role permissions. Users must have appropriate access rights to view the video content.