Native Picture-in-Picture

Updated
  • Updated on Sep 18, 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

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:

  1. PiP must be enabled in the project's Configuration file

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

  3. 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.

Note: 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.

Notes:

  • 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
  • Multiview
    DIVA Help Center > DIVA Player > DIVA Video player features > Playback functionality