Table of content

Use aspect ratio to create a vertical Player

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

If you prefer defining your Player format via the Dailymotion Studio without manipulating any code, please follow our dedicated guide.

Aspect ratio

Define your Player’s format using the 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:

Create vertical Player

Authentication & scope:

 

To create or modify a Player via the API, make sure you’re authenticated with the manage_players scope. Refer to the authentication guides to see how to authenticate with specific scopes.

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, depending on your needs, set the aspect_ratio to either 9:16 or 3:4.

Create new Player
Edit existing Player 
// Replace <YOUR_CHANNEL_ID> with your own Channel 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://api.dailymotion.com/user/<YOUR_CHANNEL_ID>/players'
 
// 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://api.dailymotion.com/player/<YOUR_PLAYER_ID>'

Embed vertical videos

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.

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
  • lib_script_url: provides the embed code for the Library Embed Script
  • embed_html_url: provides the embed code for iFrame integrations
{
    "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"
}

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

Check the guide to retrieve a video ID if you don’t know yet how to do.

// 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>

Check the Embed guides to see which embed method best fits your needs and how to use them with video and playlist IDs.

To embed using our Android and iOS SDK, you’ll only need the Player ID and video ID.