jekyll-bunny

A Jekyll plugin that provides a {% bunny %} Liquid tag for embedding Bunny Stream-hosted videos with a responsive iframe wrapper.

Installation

Add to your Gemfile:

gem "jekyll-bunny", "~> 0.1"

Add to your _config.yml:

plugins:
  - jekyll-bunny

Then run:

bundle install

Usage

The tag requires both your Library ID and Video ID:

{% bunny LIBRARY_ID VIDEO_ID %}

With optional parameters:

{% bunny LIBRARY_ID VIDEO_ID autoplay=false loop=true muted=false showSpeed=true %}

The tag outputs a responsive 16:9 iframe wrapper:

<div class="bunny-embed" style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;">
  <iframe
    src="https://player.mediadelivery.net/embed/LIBRARY_ID/VIDEO_ID"
    frameborder="0"
    allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture"
    allowfullscreen
    style="position:absolute;top:0;left:0;width:100%;height:100%;"
    loading="lazy">
  </iframe>
</div>

Finding Your Library ID and Video ID

Both values are available in your Bunny Stream dashboard. The embed URL format is:

https://player.mediadelivery.net/embed/{LIBRARY_ID}/{VIDEO_ID}

You can also copy the embed code from the video details page in the Bunny Stream dashboard.

Supported Parameters

Parameter Values Description
autoplay true, false Autoplay on load (may be blocked by browsers)
loop true, false Loop playback
muted true, false Start muted
preload true, false Preload video files
playsinline true, false Play inline on mobile
t 30s, 1h20m45s, hh:mm:ss, or seconds Start playback at this time
captions caption short-code Default caption language (e.g., en)
chromecast true, false Enable Chromecast support
disableAirplay true, false Disable AirPlay
disableIosPlayer true, false Disable native iOS player
showHeatmap true, false Show engagement heatmap on progress bar
showSpeed true, false Show playback speed control
rememberPosition true, false Remember last playback position
compactControls true, false Enable compact player UI
responsive true, false Responsive player sizing

Styling

The plugin outputs an unstyled .bunny-embed wrapper div. Add bottom margin or other spacing in your site's CSS:

.bunny-embed {
  margin-bottom: 2rem;
}

License

MIT — see LICENSE.txt.