Embedding videos

Bunny Stream is designed for developers and content creators to easily upload, process, and display videos within any application or website. Once your videos have been processed, you can embed them by using our lightweight embed player, enabling seamless playback across all devices and browsers.

How to embed a video?

Embedding a video involves placing an <iframe> element on your webpage. By referencing the correct Bunny Stream embed url and including your video library and video IDs, you can display your video anywhere you like.
Each embedded video is accessed via the following URL pattern:

https://iframe.mediadelivery.net/embed/{video_library_id}/{video_id}

Bunny Stream’s embed player will automatically adjust to fill the full width and height of the <iframe>. For best results, we recommend using a responsive layout. If a fixed aspect ratio is required, a common approach is to use a container with a position:absolute;top:0;width:100%;height:100%; style, maintaining a standard 16:9 format or your desired ratio.

Example code:

<div style="position: relative; padding-top: 56.25%;">
  <iframe src="https://iframe.mediadelivery.net/embed/759/eb1c4f77-0cda-46be-b47d-1118ad7c2ffe?autoplay=true" 
      loading="lazy" style="border: none; position: absolute; top: 0; height: 100%; width: 100%;" 
      allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true">
  </iframe>
</div>
<iframe 
  src="https://iframe.mediadelivery.net/embed/256380/d9d9ab1f-fc9f-4488-9c26-4ffc653c0024?autoplay=true&loop=false&muted=false&preload=true&responsive=false"
  loading="lazy" 
  style="border:0;position:absolute;top:0;height:100%;width:100%;" 
  allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;" 
  allowfullscreen="true">
</iframe>

The embed code for a particular video can be generated on the video details page in the dashboard.

Parameters

By default, many of the player’s controls and behaviors, such as captions, autoplay, and preload, can be configured on a global scale within the Player tab of your Bunny Stream library settings. Adjusting these default configurations ensures that any video embedded from that library inherits the same baseline behavior, providing a consistent user experience across all embedded instances.

However, you can also fine-tune or override these defaults on a per-embed basis by adding query parameters directly to the embed URL. This flexibility allows you to tailor the playback experience for specific pages or use-cases without affecting the global settings of your library.

Supported Parameters

Below is a concise table summarizing each parameter, its possible values, a brief description, and the default value.


ParameterValuesDescriptionDefault Value
autoplaytrue, falseControls whether the video should start playing automatically. Due to browser restrictions on auto-play, this may not always work.true
captionscaption short-code stringControls the default captions file that will be shown. By passing the caption code, the player will automatically load these captions. By default, the player remembers the user's last selection or does not load captions.N/A
preloadtrue, falseControls whether the video files are preloaded. When set to true, the player immediately starts downloading the video so playback begins more quickly.true
t1. Xs or 1h20m45s
2) hh:mm:ss
3) Numeric
Sets the video start time. Supports multiple formats: seconds/minutes/hours notation, hh:mm:ss format, or a simple numeric value interpreted as seconds.N/A
chromecasttrue, falseEnables or disables Chromecast support within the player.N/A
disableAirplaytrue, falseDisables AirPlay support when set to true.N/A
disableIosPlayertrue, falseDisables the native iOS player (used typically for fullscreen handling on iOS).N/A
showHeatmaptrue, falseDisplays a heatmap on the progress bar when set to true, highlighting viewer engagement at different points in the video.N/A
mutedtrue, falseIf set to true, the player starts in mute mode (no sound). This is often used for autoplay scenarios.N/A
looptrue, falseReplays the video automatically after it ends, creating a continuous loop.N/A
playsinlinetrue, falseAllows the video to play inline on mobile devices rather than forcing fullscreen playback.N/A
showSpeedtrue, falseShows a speed control within the player, allowing playback rate adjustments.N/A

Player keyboard shortcuts

Bunny Stream player has support for the following keyboard shortcuts.

KeyAction
0 to 9Seek from 0 to 90% respectively
spaceToggle playback
KToggle playback
Seek backward by the seekTime option
Seek forward by the seekTime option
Increase volume
Decrease volume
MToggle mute
FToggle fullscreen
CToggle captions
LToggle loop

Custom integration

If you prefer to use your own player or a fully custom video integration, you can directly access the raw video files from Bunny Stream’s infrastructure. Please refer to our Video Storage Structure documentation for details on how to retrieve and utilize video files directly.