> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.bannerify.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed the video player

> Learn how to play a video template with your own content on any page, with the Bannerify video player.

The embed player plays a video template with your modifications in the viewer's browser. You put it on your page in an iframe. This is useful for personalized videos on landing pages, in apps, and in customer portals, where each viewer sees their own name, photo, or offer.

## How it works

1. Your server signs a video link of the template, with the modifications of the viewer.
2. Your page opens the query of that link at `https://embed.bannerify.co/play` in an iframe.
3. Bannerify checks the signature and your plan, and draws the layers of the template with your modifications.
4. The viewer's browser plays the video: it moves each layer at each frame, with the animations, the video layers and the sound of the template.

No video file renders, so the video starts at once, at full quality, at any length. The player is the same for every site, and has the controls of a normal video player.

## Prerequisites

* A video template. See [Generate videos](https://documentation.bannerify.co/docs/essentials/generate-videos).
* The Scale or Enterprise plan.
* An API key, kept on your server. See [Authentication](https://documentation.bannerify.co/docs/api-reference/authentication).

## Create the player URL

### 1. Sign a video link

Sign the video link on your server. The SDKs sign it without a network request.

```ts theme={null}
const url = await bannerify.generateVideoSignedUrl("tpl_xxx", {
  modifications: [{ name: "headline", text: "Hello, Ada" }],
})
```

For the other SDKs, see [Create a video link](https://documentation.bannerify.co/docs/essentials/dynamic-videos#create-a-video-link).

### 2. Build the player URL

Take the query of the video link, and put it after `https://embed.bannerify.co/play`:

```ts theme={null}
const playerUrl = `https://embed.bannerify.co/play${new URL(url).search}`
```

The signature covers the whole query, so do not change it or add parameters to it.

### 3. Show the player

Put the player URL in an iframe on your page:

```html theme={null}
<iframe
  src="https://embed.bannerify.co/play?apiKeyHashed=...&modifications=...&templateId=tpl_xxx&sign=..."
  width="540"
  height="675"
  allow="fullscreen"
  style="border: 0"
></iframe>
```

The player URL holds the hash of your API key and a signature, never the key itself, so it is safe in your page. Anyone with the URL can play that video with those modifications, and nothing else.

## Size the player

The player fits the video inside the iframe, and fills the space around it with black. Give the iframe the aspect ratio of the template to show no bars. For a page that changes width:

```html theme={null}
<iframe
  src="https://embed.bannerify.co/play?..."
  allow="fullscreen"
  style="width: 100%; aspect-ratio: 4 / 5; border: 0"
></iframe>
```

## Options

Options go after `#` at the end of the player URL, because the signature covers the query.

| Option | Example | What it does |
| - | - | - |
| `loop` | `https://embed.bannerify.co/play?...#loop` | Plays the video again from the start when it ends. |

## Controls

The player starts paused, because browsers do not play sound before the viewer touches the page. The viewer starts the video with the large play button, or with a click on the video.

| Control | What it does |
| - | - |
| Play and pause | Starts and stops the video. At the end, the button plays the video again. |
| Seek bar | Moves to any time of the video. |
| Mute and volume | Turns the sound off and on, and sets how loud it is. |
| Time | Shows the current time and the length of the video. |
| Full screen | Shows the video on the whole screen. The iframe needs `allow="fullscreen"`; without it, the button does not show. |

While the video plays, the controls hide when the pointer stops, and show again when it moves.

## Keyboard shortcuts

The shortcuts work when the player has the focus, for example after a click on the video.

| Key | What it does |
| - | - |
| Space or K | Play or pause |
| Left and Right arrows | Go back or forward 5 seconds |
| Home and End | Go to the start or the end |
| Up and Down arrows | Make the sound louder or quieter |
| M | Mute or unmute |
| F | Full screen |

## Usage

Each load of the player counts as a video: one generation for each second, and two for each second at 60 fps. A load that Bannerify answers from its cache, such as the same player URL opened again, counts no new generation. See [Limits and usage](https://documentation.bannerify.co/docs/essentials/dynamic-videos#limits-and-usage).

## Troubleshooting

| What you see | Why | What to do |
| - | - | - |
| "Invalid sign" | The query changed after it was signed. | Use the query of the signed link as it is. Put options after `#`. |
| "Video links are available on the Scale and Enterprise plans." | The workspace of the API key has another plan. | Upgrade the workspace. See [Billing](https://documentation.bannerify.co/docs/account/billing). |
| "This template is not a video template." | The template has no video settings. | Use a video template. See [Generate videos](https://documentation.bannerify.co/docs/essentials/generate-videos). |
| No full screen button | The iframe does not allow full screen. | Add `allow="fullscreen"` to the iframe. |
| No sound | The viewer muted the player, or the template has no sound. | Turn the sound on with the mute button, or add an audio track to the template. |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.