> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://fastpix.com/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://fastpix.com/docs/_mcp/server.
# Embed a video in your app
After uploading a video, FastPix lets you play an uploaded video in two ways: drop in a hosted iframe that handles HLS playback for you, or stream the `.m3u8` playback URL into a custom player you control. Both paths use the same `playbackId` FastPix returns after transcoding completes.
\
Watch this Video Tutorial for a better understanding.
## Prerequisites
* A FastPix account with an active workspace ([Activate your account](/getting-started/activate-your-account))
* A video already uploaded to FastPix with status `ready` ([Upload videos from a URL](/upload-videos/upload-videos-from-a-url))
* The `playbackId` for that video (available in the Dashboard → **Media > Manage media > Overview**)
* An HTML page or a web, mobile, or OTT app where you can paste the embed code
\
## Key terms
* `mediaId` is the unique identifier FastPix assigns to every uploaded asset.
* `playbackId` is a separate, access-controlled identifier used to construct the HLS playback URL: `https://stream.fastpix.com/{playbackId}.m3u8`. FastPix keeps these identifiers separate so you can rotate or revoke playback access without touching the source asset.
\
## Get your playbackId
Every video has a unique playbackId used for embedding and playback.
To find it:
1. Open the FastPix Dashboard and go to **Video > Media**.
2. Click on your video to open the **Media Details** page.
3. Under the **Playback ID** section, copy the playback ID displayed.
\
4. In the left navigation, click **Integrate** to open the **Embed video** panel.
You'll see:
* A copyable iframe embed code
* The direct `.m3u8` streaming URL
* The raw `playbackId`
\
If the asset uses an `accessPolicy` of `private`, generate a signed `playbackId` before embedding. See [Secure playback with signed URLs](/video-security/secure-media-access-with-jwts).
\
## Choose your method
FastPix supports both playback workflows:
**Use the iframe embed code** if:
* You want to add a video player to a webpage without writing player code
* You do not need to customize the playback experience or build your own controls
\
**Use the streaming URL** if:
* You are building a web, mobile, or OTT app that uses a custom video player
* You need full control over playback, analytics, or UI design
\
## Embed with an iframe
The `iframe` method renders the FastPix-hosted player inside your page. FastPix handles HLS playback, buffering, and adaptive bitrate streaming automatically.
Paste the following code into your HTML page and replace the `playbackId` value with yours:
```html
```
\
### Playback options
Control the behavior and appearance of the embedded player using URL parameters:
| Option | Description |
| ----------------------- | ---------------------------------------------------------------- |
| `autoplay=true` | Automatically starts playback when the page loads |
| `muted=true` | Mutes audio on load (required for autoplay in most browsers) |
| `loop=true` | Repeats the video endlessly |
| `hide-controls=true` | Hides default playback controls (play/pause bar, and others) |
| `enableVideoClick=true` | Allows interaction or redirection on video click |
| `aspect-ratio=21/9` | Sets the aspect ratio to cinematic widescreen (adjust as needed) |
\
### Make the iframe responsive
To render a responsive video embed that scales on all screen sizes, wrap the iframe in a container that enforces a 16:9 aspect ratio with a padding-top technique:
```html
```
The `56.25%` padding corresponds to a 9/16 ratio. Use `75%` for 4:3 or `42.86%` for 21:9.
\
## Stream through a custom player
Use this method when you are building a custom player in a web, mobile, or OTT app. FastPix exposes an HLS `.m3u8` manifest for each video.
**Streaming URL format**
**`URL`**
```text URL
https://stream.fastpix.com/{playbackId}.m3u8
```
Replace `{playback_Id}` with your video's `playbackId`.
\
**Compatible m3u8 players:**
* **HLS.js** or **Shaka Player** (web)
* **AVPlayer** (iOS and macOS)
* **ExoPlayer** (Android)
* Native players on smart TVs and OTT devices
The stream uses adaptive bitrate streaming, so rendition quality adjusts to the viewer's bandwidth automatically.
\
> 📘 **NOTE**
>
> * Autoplay requires `muted=true` to work reliably across browsers
> * Use the correct aspect ratio or fixed dimensions to avoid black bars
> * Test playback on different browsers and devices before shipping
\
#### Best practices
To deliver a smooth playback experience for your users, follow these recommended practices after embedding your FastPix video.
* **Test across environments**: Check playback on major browsers (Chrome, Safari, Firefox, Edge) and on both desktop and mobile devices to catch compatibility issues early.
* **Keep it responsive**: Wrap the iframe in a CSS container that maintains aspect ratio across screen sizes. This avoids layout shifts and black bars.
* **Respect autoplay rules**: Most browsers block autoplay unless the video is muted. Always set `muted=true` when you also set `autoplay=true`.
* **Support accessibility**: If your video includes speech, add captions or a transcript to improve accessibility and SEO performance.
\
## Common use cases for embedded videos
FastPix delivers high-quality playback for a wide range of business and creative needs. Common scenarios where embedding video adds real value:
* **Product demos on landing pages**: Let users see your product in action without clicking away.
* **Customer testimonial showcases**: Build trust with real user feedback presented through short video clips.
* **Tutorials and how-to content**: Help users onboard faster with visual walkthroughs in your docs or support center.
* **Creative portfolios**: Showcase animations, short films, or reels without relying on third-party platforms.
* **Event highlights and webinar replays**: Let visitors watch missed sessions directly on your site.
* **Background or hero section videos**: Use autoplaying, muted, looping videos to enhance landing page visuals.
\
#### Frequently asked questions
Confirm the `playbackId` in the iframe `src` matches an asset with status `ready` in your FastPix workspace. If the asset uses an `accessPolicy` of `private`, you must pass a signed `playbackId`; an unsigned one returns a 403.
Most browsers block autoplay for videos with sound. Add `muted=true` to the iframe URL alongside `autoplay=true`. The hosted FastPix player honors the browser's autoplay policy and falls back to a play button when autoplay is blocked.
Generate a signed `playbackId` using your signing key, then pass it into the iframe `src` or the `.m3u8` URL. See [Secure playback with signed URLs](/video-security/secure-media-access-with-jwts) for the full flow.
On the web, HLS.js covers browsers that do not play HLS natively; Safari plays HLS natively through the `