Bunny Stream was designed for developers to easily upload, process, and display videos in any type of use-case. To display a video on your website, you can use the embed view. The embed code is provided in the interface to be able to easily copy-paste into your website HTML.

It is also possible to construct the embed code yourself using the video library ID and video ID.

How to embed a video?

To embed a video, you will need to create an iframe to the URL below. Each URL is structured from the video library ID and video ID.

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

The video will automatically fill the full width and height of the embed iframe. It is recommended to generate this dynamically based on the width and height of the video or use the standard 16:9 format as in the example below.

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/759/eb1c4f77-0cda-46be-b47d-1118ad7c2ffe?autoplay=true" 
        loading="lazy" width="1280" height="720" style="border: none;" 
        allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true">
</iframe>

Parameters

It is possible to control the embedded video with custom parameters.

autoplay (true, false)

The autoplay query parameter controls whether the video should start playing automatically when the page loads. Note that due to browser restrictions that prevent auto-playable videos, this might not always work correctly. The default value is set to true.

captions (caption short-code string)

Controls the default captions file that will be shown. By passing the captions code, the player will automatically start displaying these. By default, the player will remember the user's previous selection or not load captions.

preload (true, false)

The preload parameter controls the preload behavior of the player. True by default, the player will immediately start preloading the video files to allow quick playback once the user starts playing the video. You can see this by false to save bandwidth and only start loading the video once the Play button is clicked.

t (time format string) Video start time

The t parameter sets the player video start time. It supports three formats:
Format 1: for specifying "seconds" insert the format "Xs" where "X" represents the time slot number and "s" stands for seconds, such as "45s". Hours and minutes can be added to format, for example "1h20m45s"
Format 2: hh:mm:ss, for example "01:25:10"
Format 3: numeric values are converted to seconds

chromecast (true, false):

This parameter enables or disables Chromecast support on the player. Set to true to enable casting capabilities.

disableAirplay (true, false):

When set to true, this parameter disables AirPlay support, preventing the video from being streamed to AirPlay-compatible devices.

disableIosPlayer (true, false):

If set to true, this parameter disables the native iOS player support, which is typically used to handle fullscreen playback properly on iOS devices.

showHeatmap (true, false):

This parameter controls the visibility of a heatmap over the player's progress bar. Set to true to display the heatmap, which is useful for showing viewership intensity at different points in the video.

muted (true, false):

If true, the player starts playing the video muted, i.e., without sound. This can be useful in environments where autoplay with sound is restricted.

loop (true, false):

Setting this parameter to true causes the video to restart automatically when it reaches the end, creating a continuous loop.

playsinline (true, false):

This parameter indicates whether the video should play "inline," i.e., within the confines of the layout without attempting to go into fullscreen mode on play, particularly relevant in mobile environments.

showSpeed (true, false):

This parameter controls the display of speed controls within the player. If set to true, the speed control options are shown, allowing users to adjust playback speed according to their preference.

Player keyboard shortcuts

Bunny Stream player has support for the following keyboard shortcuts.

Custom integration

If you wish to use your own player or video integration, we also expose the video files directly. To learn more about the video storage structure to use with your own solution, you can see the Video Storage Structure page.