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.

Value	Info
`pip: off`	The PiP is not enabled
`pip: on`	The 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: instant`	The 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:

Value	Info
`collapsed`	The video Player height is reduced not to interfere with page content (articles, text, images)
`expanded`	The 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.

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

CSS Selector	Info
`#dailymotion-pip-large-viewport`	Targets PiP for viewports with a width higher than 480px
`#dailymotion-pip-small-viewport`	Targets 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 Properties	Info
`--position-top`	Property sets the top margin for the PiP element
`--position-bottom`	Property sets the bottom margin for the PiP element
`--position-right`	Property sets the right margin for the PiP element
`--position-left`	Property 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:

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