Table of content

How to work with Picture-in-Picture (PiP)


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.

A verified Partner can enable the Dailymotion Picture-in-Picture feature in the Player settings using the Dailymotion Studio or Platform API. This functionality requires JavaScript and can only be used with the Player Embed Script or Player Library Script on web embeds.

PiP settings

As the user scrolls the page, the video must transition from playing in the in-page video player to playing in a sticky video player, which remains in view as the user scrolls the page.

ValueInfo
pip: offThe PiP is not enabled
pip: onThe PiP will transition after the main player was firstly seen by the user and after they scroll the page so less than 50% of the main player is within the viewport
pip: instantThe PiP will launch once the player is loaded and the main player isn’t in the user’s viewport

When triggered, a mini player is, by default, 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.

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:

ValueInfo
collapsedThe video Player height is reduced not to interfere with page content (articles, text, images)
expandedThe video Player is at full width and height (preserving video ratio)

By default, the Player will initially transition to a collapsed format unless the configuration is set to “Start PiP in expanded” option in the Dailymotion Studio or Platform API. The viewers can alter between the mobile PiP formats using the collapsed toggle on the UI. During advertisements the 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.

Note:

We use CSS variables as they ensure a better CLS score. Our CSS codes to reposition PiP are optimized for viewability, performance and monetization.

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

CSS SelectorInfo
#dailymotion-pip-large-viewportTargets PiP for viewports with a width higher than 480px
#dailymotion-pip-small-viewportTargets PiP for viewports with a width smaller than 480px

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

CSS PropertiesInfo
--position-topProperty sets the top margin for the PiP element
--position-bottomProperty sets the bottom margin for the PiP element
--position-rightProperty sets the right margin for the PiP element
--position-leftProperty sets the left margin for the PiP element

You can use any CSS unit within the CSS properties.

Examples

/* 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 allocated methods of the Web SDK. The PiP setting has to be enabled in the Player configuration. Once the PiP is activated, the Player API exposes five global methods:

TypeMethodInfo
Close PiPdailymotion.pipClose()To suspend PiP functionality
Demo
Resume PiPdailymotion.pipResume()To resume PiP functionality after it has been suspended
Demo
Repaint PiPdailymotion.pipRepaint()To repaint PiP seamlessly when dynamic elements are changing the layout of a page
Demo
Collapse mobile PiPdailymotion.pipCollapse()To collapse the sticky PiP displayed on mobile (delayed if an ad is running)
Demo
Expand mobile PiPdailymotion.pipExpand()To expand the sticky PiP displayed on mobile
Demo
Tip:

Only embed one player configuration with PiP activated as only one can be launched per page. In the case of instant PiP mode, the first player which will load on the page will launch in instant PiP.