Skip to content

Stream-embedding-portrait-video-nathan #286

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mintlify wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Stream-embedding-portrait-video-nathan #286

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cc9ff66
Updated mintlify pages
mintlify[bot] Jun 12, 2026
10fb20d
Merge branch 'main' into Stream-portrait-video-nathan
NathanZBunny Aug 6, 2026
2b195a5
Merge branch 'main' into Stream-portrait-video-nathan
NathanZBunny Aug 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
125 changes: 125 additions & 0 deletions stream/embedding.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,131 @@ Example code:

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

## How to embed vertical portrait (9:16) mobile video

Portrait (9:16) video is common for mobile-first content, short-form clips, and social-style players. By default, the Stream embed renders in landscape (16:9). This guide shows you how to adjust it for vertical video.

@mihan mihan Aug 27, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm I wouldn't express it like this. I would rather state that Stream player is responsive and automatically adopts to container size. Embed html generated in dash is just example and I would not go into detail this much. I would rather briefly explain that iframe can be styled as any html element to optimize sizing for video size and requirements of integrating webside.


#### Basic embed

The standard Stream embed code wraps the iframe in a div with `padding-top: 56.25%` to maintain a 16:9 ratio:

@mihan mihan Aug 27, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think it is good to talk about "the standard embed code" What dashboard produces is just an example and it should not be generally copy pasted but users should adopt it to their requirements. Also current markup is not even the best possible and it would be good to rethink it.


To embed portrait video, you have two options: the **wrapper approach** (broader compatibility) or the **direct approach** (simpler, modern browsers only).

#### Option 1: Direct aspect-ratio (recommended)

For modern browsers, you can apply `aspect-ratio` directly to the iframe and remove the wrapper div entirely.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portrait Video</title>
<style>
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
background: #000;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

iframe {
width: min(100vw, calc(100vh * 9 / 16));
aspect-ratio: 9 / 16;
border: 0;
display: block;
}
</style>
</head>
<body>
<iframe
src="https://player.mediadelivery.net/embed/{library_id}/{video_id}?autoplay=true&loop=true&muted=true&preload=true&responsive=true"
loading="lazy"
allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;fullscreen;"
allowfullscreen="true">
</iframe>
</body>
</html>
```

The key CSS properties are:

- `aspect-ratio: 9 / 16` - locks the iframe to portrait proportions
- `width: min(100vw, calc(100vh * 9 / 16))` - scales the player to fill the viewport without overflow on any screen size
- `display: block` - removes the default inline gap beneath the iframe

<Note>
This approach requires a browser that supports the `aspect-ratio` CSS property (Chrome 88\+, Firefox 89\+, Safari 15\+). For broader compatibility, use Option 2 below.
</Note>

#### Option 2: Wrapper div

If you need to support older browsers or want more control (e.g. overlaying UI elements on top of the player), use a wrapper div instead.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portrait Video</title>
<style>
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
background: #000;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

.video-wrapper {
position: relative;
width: min(100vw, calc(100vh * 9 / 16));
aspect-ratio: 9 / 16;
}

.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>
</head>
<body>
<div class="video-wrapper">
<iframe
src="https://player.mediadelivery.net/embed/{library_id}/{video_id}?autoplay=true&loop=true&muted=true&preload=true&responsive=true"
loading="lazy"
allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;fullscreen;"
allowfullscreen="true">
</iframe>
</div>
</body>
</html>
```

The wrapper approach works by:

1. Sizing the **wrapper div** to the correct portrait dimensions
2. Stretching the **iframe** to fill it absolutely with `position: absolute; width: 100%; height: 100%` Use this approach when you need to layer overlays, captions, or buttons on top of the player.

## 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.
Expand Down