Embedding Videos

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

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 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.