embedding.mdx

title	Embedding videos
description	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.

Once a video has finished processing, you can embed it on any page using the Bunny Stream player. This page covers the iframe URL pattern, sizing tips, and code samples for common frameworks.

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://player.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", paddingTop: "56.25%" }}>
  <iframe
    src="https://player.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://player.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 or direct play 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.

Parameter	Values	Description	Default Value
autoplay	true, false	Controls whether the video should start playing automatically. Due to browser restrictions on auto-play, this may not always work.	true
captions	caption short-code string -auto	Controls 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. Use in combination with -autoafter the country code for the captions to display automatically on playback.	N/A
preload	true, false	Controls whether the video files are preloaded. When set to true, the player immediately starts downloading the video so playback begins more quickly.	true
t	Xs ,1h20m45s , hh:mm:ss , numeric	Sets the video start time. Supports multiple formats: hours/minutes/seconds notation, hh:mm:ss format, or a simple numeric value interpreted as seconds.	N/A
chromecast	true, false	Enables or disables Chromecast support within the player.	N/A
disableAirplay	true, false	Disables AirPlay support when set to true.	N/A
disableIosPlayer	true, false	Disables the native iOS player (used typically for fullscreen handling on iOS).	N/A
showHeatmap	true, false	Displays a heatmap on the progress bar when set to true, highlighting viewer engagement at different points in the video.	N/A
muted	true, false	If set to true, the player starts in mute mode (no sound). This is often used for autoplay scenarios.	N/A
loop	true, false	Replays the video automatically after it ends, creating a continuous loop.	N/A
playsinline	true, false	Allows the video to play inline on mobile devices rather than forcing fullscreen playback.	N/A
showSpeed	true, false	Shows a speed control within the player, allowing playback rate adjustments.	N/A
rememberPosition	true, false	Controls whether the player remembers the last playback position for the viewer within their browser. If set to true, the player stores the last position and attempts to resume from that point when the viewer returns. When false, the video always starts from the beginning.	false
compactControls	true, false	Enables compact UI view for the bunny player, allowing more space for video on desktop and mobile browsers.	false

Direct play URL query parameter example

https://player.mediadelivery.net/play/{video_library_id}/{video_id}?t=30s

This example uses a query parameter which means the direct play URL will start video playback at 30 seconds.

Player keyboard shortcuts

Bunny Stream player has support for the following keyboard shortcuts.

Key	Action
0 to 9	Seek from 0 to 90% respectively
space	Toggle playback
K	Toggle playback
←	Seek backward by the seekTime option
→	Seek forward by the seekTime option
↑	Increase volume
↓	Decrease volume
M	Toggle mute
F	Toggle fullscreen
C	Toggle captions
L	Toggle 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.