---
updatedAt: 2026-07-27T10:42:05.000Z
agentTools:
  projectIndex: https://developers.dailymotion.com/v0/llms.txt
---

# Vertical Player

Use aspect ratio to create a vertical Player.

<Callout icon="🚀" theme="default">
  ### API v2 now available

  Visit the <Anchor target="_blank" href="https://developers.dailymotion.com/v2/reference/introduction">API v2 documentation</Anchor> or follow the <Anchor target="_blank" href="https://developers.dailymotion.com/v2/docs/migrating-from-legacy-api-to-api-v2">migration guide</Anchor> to upgrade.
</Callout>

<br />

# Introduction

**Wondering how to showcase your vertical content?**

The Dailymotion Player can be set up in a **vertical format**, making it **easy to embed and monetize your vertical videos** on native and web environments.

* **Optimized for mobile devices** - Improve user experience without wasting screen space
* **Easy to share across platforms -** Make the most out of your TikTok and Instagram vertical videos by embedding them on your app and website in their original format
* **Fully customizable -** Along with the vertical format, define the UI and Player behaviors your need for a fully custom experience

<Callout icon="👍" theme="okay">
  ### Alternative

  If you prefer defining your Player format via the Dailymotion Studio without manipulating any code, please follow our **[dedicated guide](https://faq.dailymotion.com/hc/articles/17031168293650)**.
</Callout>

# Which aspect ratio?

Define your Player's format using the [`aspect_ratio`](https://developers.dailymotion.com/reference/player-fields#/aspect_ratio) Player parameter. For a vertical Player, set its value to either `9:16` or `3:4`.

The below demo Player is using `9:16` aspect ratio:

<br />

<HTMLBlock>{`
<iframe height="600" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/Svorgeiidi/embed/zxqpgBR?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true">
      See the Pen <a href="https://codepen.io/Svorgeiidi/pen/zxqpgBR">
  Untitled</a> by Giovanni (<a href="https://codepen.io/Svorgeiidi">@Svorgeiidi</a>)
  on <a href="https://codepen.io">CodePen</a>.
      </iframe>
`}</HTMLBlock>

***

<br />

# Implementation steps

<br />

## 1. Create a vertical Player

<Callout icon="📘" theme="info">
  ### Authentication & scope

  To create or modify a Player via the API, make sure you’re authenticated with the `manage_players` [scope](https://developers.dailymotion.com/v0/reference/api-scopes). Refer to the authentication guides to see how to [authenticate with specific scopes](https://developers.dailymotion.com/v0/reference/authentication-api).
</Callout>

Using the below code samples, you can **create a new Player or edit an existing one to adapt it to your vertical videos**. Perform a `POST` request and set the `aspect_ratio` to either `9:16` or `3:4`.

```curl Create new Player
// Replace <YOUR_PROFILE_ID> with your own profile ID

curl -X POST -H 'Authorization: Bearer ${ACCESS_TOKEN}' \
       -d 'label=My vertical Player' \
       -d 'aspect_ratio=9:16' \
       -d 'fields=embed_script_url,lib_script_url,embed_html_url' \
    'https://partner.api.dailymotion.com/rest/user/<YOUR_PROFILE_ID>/players'
```
```curl Edit existing Player
// Replace <YOUR_PLAYER_ID> with the Player ID you want to modify

curl -X POST -H 'Authorization: Bearer ${ACCESS_TOKEN}' \
       -d 'aspect_ratio=9:16' \
       -d 'fields=embed_script_url,lib_script_url,embed_html_url' \
       'https://partner.api.dailymotion.com/rest/player/<YOUR_PLAYER_ID>'
```

<Cards columns={1}>
  <Card title="Create a Player: Try it out!" href="https://developers.dailymotion.com/v0/reference/partner-api-create-a-player" icon="fa-angle-double-down" />
</Cards>

<br />

## 2. Embed vertical videos

<Callout icon="⚠️" theme="warn">
  Each Player has its own ID. In the example below, `xpivc` is used as a demo Player ID. Make sure to retrieve and use yours.
</Callout>

As a response to your call, you'll receive the following elements:

* `id`: Your **Player ID**, the unique identifier of your Player that can be passed in the embed codes right below to carry your custom Player configuration
* `embed_script_url`: Provides the embed code for the [Player Embed Script](https://developers.dailymotion.com/v0/reference/player-fields#/embed_script_url)
* `lib_script_url`: Provides the embed code for the [Library Embed Script](https://developers.dailymotion.com/v0/reference/player-fields#/lib_script_url)
* `embed_html_url`: Provides the embed code for [iFrame](https://developers.dailymotion.com/v0/reference/player-fields#/embed_html_url) integrations

```json
{
    "id": "xpiw2",
    "embed_script_url": "https://geo.dailymotion.com/player/xpiw2.js",
    "lib_script_url": "https://geo.dailymotion.com/libs/player/xpiw2.js",
    "embed_html_url": "https://geo.dailymotion.com/player/xpiw2.html"
}
```

<br />

You can now copy your preferred embed code, add the ID of the video you want to embed, and embed it on your website. For example:

```javascript
// In this example, the Player ID is xpiw2 and the video ID is x84sh87
// Make sure to replace them with your own IDs

// Player Embed Script example 

<script
src="https://geo.dailymotion.com/player/xpiw2.js" data-video="x84sh87"></script>
```

<br />

Check the guide to [retrieve a video ID](https://developers.dailymotion.com/v0/docs/collect-your-video-ids) if you don't know yet how to do.

Check the embed guides to see which embed method best fits your needs and how to use them:

* [Embed guide with Web SDK](https://developers.dailymotion.com/v0/docs/getting-started-with-the-web-sdk)
* [Embed guide with Android SDK](https://developers.dailymotion.com/v0/docs/getting-started-with-the-android-sdk)
* [Embed guide with iOS SDK](https://developers.dailymotion.com/v0/docs/getting-started-with-the-ios-sdk)

<br />