The Dailymotion Player is compatible with native Picture-in-Picture (PiP) in addition to our own out-of-the-box Picture-in-Picture product.

Native PiP allows viewers to continue watching content while browsing on other apps and websites on their devices. This functionality is controlled by the browsers APIs and cannot be customized: the below method doesn’t apply to it.

Our own Dailymotion PiP solution allows viewers to continue watching your content while scrolling the page. Our PiP is easily managed through the Dailymotion Studio and can be customized: it delivers a smooth and engaging user experience and will help boost your monetization opportunities.

Pro subscribers can enable the Picture-in-Picture feature in the Player settings using the Dailymotion Studio or API. This functionality requires JavaScript and can only be used with the Player Embed Script or Player Library Script on web embeds. It is not available with the iFrame embed method.

PiP settings

As the user scrolls the page, the video transitions from playing in the in-page Player to playing in a sticky mini Player, which remains in view as the user continues scrolling.

The pip.is_enabled parameter controls this behavior:

You can set this parameter when creating or updating a Player via the API:

curl --request POST \
     --url https://api.dailymotion.com/v2/profiles/<YOUR_PROFILE_ID>/players \
     --header 'accept: application/json' \
     --header 'authorization: Bearer ${ACCESS_TOKEN}' \
     --header 'content-type: application/json' \
     --data '{
       "name": "My Player",
       "pip": {
         "is_enabled": "on"
       }
     }'

When triggered, the mini player is displayed at the bottom right on wide screens and at the top on narrow screens. Further positioning can be achieved using custom CSS, see the section below "PiP customization".

PiP positioning

Desktop-specific behavior

The PiP frame will, by default, transition and appear at the bottom right of the screen. It's optimized for viewability, performance, monetization and built with a minimal, user-centric design. The desktop PiP will have a minimum size of 410px width with a 16:9 aspect ratio sized responsively.

You can configure the default corner position using pip.selected_placement when creating or updating a Player. Accepted values are: bottom_right (default), bottom_left, top_right, top_left.

Mobile-specific behavior

The PiP frame will, by default, appear at the top of the screen and take 100% of the width.

On mobile or on a narrow viewport, the PiP Player will automatically adapt and have two modes:

By default, the Player transitions to a collapsed format initially. To start in expanded mode instead, set pip.enable_start_pip_expanded to true in your Player configuration, or use "Start PiP in expanded" option in the Dailymotion Studio or the API. Users can switch between the two mobile PiP formats using the collapse toggle in the UI. During ads, PiP will automatically expand to preserve ad viewability.

PiP customization

CSS elements

It's possible to reposition the PiP by adding specific CSS code for the dedicated element IDs. You can find CSS samples below and view demos in our CodePen Collection.

To specifically target small and large viewports, use the dedicated CSS selectors:

For each CSS selector, specify the CSS properties and their values to adjust your PiP positioning:

You can use any CSS unit within the CSS properties.

Example

/* Screens with a width higher than 480px */
#dailymotion-pip-large-viewport {
/* PiP is positioned in the top left corner with a left margin of 20 pixels and a top margin of 0 pixel */
  --position-left: 20px; /* can be any CSS unit: like px, em, rem, etc */
  --position-top: 0px; /* can be any CSS unit: like px, em, rem, etc */
}

/* Screens with a width under 480px */
#dailymotion-pip-small-viewport {
  --position-top: 10px; /* can be any CSS unit: like px, em, rem, etc */
}

Programmatically interacting with PiP

The PiP can be programmatically closed, resumed, repainted, collapsed or expanded using the dedicated Web SDK methods. The PiP setting has to be enabled in the Player configuration. Once PiP is activated, the Player API exposes five global methods: