From cc9ff663ed691dfed5c9181d147d11ee5a91f9c9 Mon Sep 17 00:00:00 2001
From: "mintlify[bot]" <109931778+mintlify[bot]@users.noreply.github.com>
Date: Fri, 12 Jun 2026 11:38:59 +0000
Subject: [PATCH] Updated mintlify pages
- Updated stream/embedding.mdx
Mintlify-Source: dashboard-editor
---
stream/embedding.mdx | 125 +++++++++++++++++++++++++++++++++++++++++++
1 file changed, 125 insertions(+)
diff --git a/stream/embedding.mdx b/stream/embedding.mdx
index f5fbf1a..40cc4f3 100644
--- a/stream/embedding.mdx
+++ b/stream/embedding.mdx
@@ -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.
+
+#### Basic embed
+
+The standard Stream embed code wraps the iframe in a div with `padding-top: 56.25%` to maintain a 16:9 ratio:
+
+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
+
+
+
+
+
+ Portrait Video
+
+
+
+
+
+
+```
+
+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
+
+
+ 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.
+
+
+#### 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
+
+
+
+
+
+ Portrait Video
+
+
+
+
+
+
+
+
+```
+
+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.