Native Picture-in-Picture

  • Updated on Sep 1, 2025
  • Published on Sep 1, 2025
  • 4 minute(s) read
Prev Next

Mobile

Tablet

Web

android_watermark.svg

iOS.svg

android_watermark.svg

iPadOS.svg

HTML5.svg

This article introduces Native Picture-in-Picture for DIVA.

What is Picture-in-Picture?

Picture-in-Picture (PiP) functionality displays a smaller floating video on top of another screen when switching apps or navigating away from a video.

PiP increases the visibility of multiple events simultaneously and is supported by the device’s operating system or browser. PiP is available for live and video-on-demand (VOD) content, including switch, modal (from a video list), and highlight videos.

Notes:

  • PiP must be enabled in the project's Configuration file

  • PiP functionality will not launch if the video content is paused, or if a playback error has occurred

  • The PiP window closes automatically when the video content in PiP view ends

Is PiP supported on all of DIVA’s video player features?

DIVA supports Picture-in-Picture for live and VOD content on the following:

  • Main player

  • Modal view

  • Switch mode

  • Highlight's mode

Currently, PiP is not supported on the following due to platform support and screen space restrictions:

  • Multi-angle clips

  • Side-by-side view

  • 360° videos

  • Casting (Airplay and Chromecast)

Important: DIVA automatically closes the PiP window if transitioning from a regular view to an unsupported view, for example, 360° videos.

How is PiP activated?

Activating PiP is determined by the platform. Select an option below to learn how to activate PiP and view examples:

Select the PiP button Side-by-side (found in the bottom-right of the playback controls) of the video you want to shrink and view as a floating window on top of the primary video. The PiP window displays in the top-right corner of the primary full-screen video window.

Primary video and PiP mode example (Responsive desktop):

Side-by-sideWhen hovering over the PiP video window, users can:

  1. Close the window via the close button  close.png

  2. Toggle between play and pause states

  3. Skip back/forward (depending on video states)

  4. Jump to live (depending on video states)

  5. Exit PiP mode and return to side-by-side mode via the side-by-side button  PiP

  6. Switch the video in the PiP player with the primary video via the switch button  PiP

Primary video and PiP mode hover state example (Responsive desktop):

Side-by-side

PiP and menu panels

With the primary menu active, the PiP window displays in the top-right corner of the screen.

PiP with primary menu active example (Responsive desktop):

PiPWith the secondary menu active, the PiP window is pinned to the top of the right panel.

PiP with secondary menu active example (Responsive desktop):

Side-by-side

Note: PiP functionality is not currently available for responsive web Android or AndroidTV.

Select the PiP button Side-by-side (found in the bottom-right of the playback controls) of the video you want to shrink and view as a floating window on top of the primary video. The PiP window displays in the top-right corner of the primary full-screen video window.

Primary video and PiP mode example (Responsive tablet):

PiP

Primary video and PiP mode example (Responsive mobile):

PiP

In the PiP window, users can:

  1. Close the window via the close button  close.png

  2. Toggle between play and pause states

  3. Skip back/forward (depending on video states)

  4. Jump to live (depending on video states)

  5. Exit PiP mode and return to side-by-side mode via the side-by-side button  PiP

  6. Switch the video in the PiP player with the primary video via the switch button  PiP

Primary video and PiP mode hover state example (Responsive tablet):

PiP

Primary video and PiP mode hover state example (Responsive mobile):

PiP

PiP and menu panels

With the primary menu active, the PiP window displays in the top-right corner of the screen.

PiP with primary menu active example (Responsive tablet):

PiP with primary menu active example (Responsive mobile):

With the secondary menu active, the PiP window is pinned to the top of the right panel.

PiP with secondary menu active example (Responsive desktop):

PiP with secondary menu active example (Responsive mobile):

Responsive mobile controls

  • Drag the PiP window to the desired location

  • Tap the  PiP_Play_Icon.png /  PiP_Pause_Icon.png toggle to control video playback

  • Tap the seek  skip_back_15_seconds.png /  skip_forward_15_seconds.png icons to skip back or forward in 15-second increments. The seekbar highlights the content duration.

  • Tap the  ios_Pip_expand.png icon to enter the full-screen view, closing the PiP window

  • Tap the  Close_PiP.png icon to dismiss the PiP window, saving the contents resume point

Tap the HTML5_iOS_PiP_contract.png icon to contract the full-screen view

Once active, the PiP window displays on the top layer of the screen with a confirmation message.

Known issues

PiP does not support the following features: midroll advertisements, Multi-angle clips, Side-by-side view, and 360° videos. If PiP view is selected from any of the above, it is immediately closed.

To activate PiP (iOS mobile and tablet) and consume content on a smaller floating window, either:

  • Navigate away from the integrated application while playing a video

  • Switch apps while playing a video

Once active, the PiP window displays on the top layer of the screen.

iOS_Mobile_-_PIP_screen__Final_Crop_.pngiOS_Tablet_-_PIP_screen__Final_Crop_.png

iOS controls

  1. Drag the PiP window to the desired location

  2. Tap the  PiP_Play_Icon.png /  PiP_Pause_Icon.png toggle to control video playback

  3. Tap the seek  skip_back_15_seconds.png /  skip_forward_15_seconds.png icons to skip back or forward in 15-second increments. The seekbar highlights the content duration.

  4. Tap the  ios_Pip_expand.png icon to enter the full-screen view, closing the PiP window. The video transitions smoothly back to the full-screen video while playing the video content.

  5. Tap the  Close_PiP.png icon to dismiss the PiP window, saving the contents resume point. On returning to the video player, the video is paused.

Known issues

  • Users can seek temporarily outside of the trimmed area

  • The seekbar shows the full length of the video (untrimmed)

  • The seekbar and seek buttons are visible for PiP and live videos

  • On iPadOS, PiP is only launched if the video is in the full-screen view

To activate PiP (Android mobile and tablet) and consume content on a smaller floating window, either:

  • Navigate away from the integrated application while playing a video

  • Switch apps while playing a video

Once active, the PiP window displays on the top layer of the screen.

Android_Mobile_-_PIP_screen__Final_Crop_.pngAndroid_Tablet_-_PIP_screen__Final_Crop_.png

Android controls

  1. Drag the PiP window to the desired location

  2. Tap the  PiP_Play_Icon.png /  PiP_Pause_Icon.png toggle to control video playback

  3. Tap the seek  skip_back_15_seconds.png /  skip_forward_15_seconds.png icons to skip back or forward. Time increments are configurable, e.g., 10 or 15 seconds. The seekbar highlights the content duration.

  4. Tap the  Android_PiP_expand.png icon to enter the full-screen view, closing the PiP window. The video transitions smoothly back to the full-screen video while playing the video content.

  5. Tap the  Android_Settings_icon.png icon to manage the integrated application's PiP settings

  6. Tap the  Close_PiP.png icon to dismiss the PiP window, saving the contents resume point. On returning to the video player, the video is paused.

Related articles
  • Side-by-side view
    DIVA Help Center > DIVA Player > DIVA Video player features > Playback functionality
  • Video playback
    DIVA Help Center > DIVA Player > DIVA Video player features > Playback functionality
  • Video player navigation
    DIVA Help Center > DIVA Player > DIVA Video player features > Content discovery