--- title: "Native Picture-in-Picture" slug: "native-picture-in-picture" updated: 2025-10-22T15:49:21Z published: 2025-10-22T15:49:21Z --- > ## Documentation Index > Fetch the complete documentation index at: https://documentation.deltatre.com/llms.txt > Use this file to discover all available pages before exploring further. # Native Picture-in-Picture | Mobile | Tablet | Web | | --- | --- | --- | | ![android_watermark.svg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4491591972892.svg) | ![iOS.svg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4491537118108.svg) | ![android_watermark.svg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4491591972892.svg) | ![iPadOS.svg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4491614004636.svg) | ![HTML5.svg](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4491613944988.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. > [!NOTE] > **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) > [!NOTE] > **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: Responsive desktopResponsive mobile/tabletNative mobile/tablet Select the PiP button ![Side-by-side](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/9137970877596.png) (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. ![Side-by-side](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/9137969607836.png) *Primary video and PiP mode example (Responsive desktop)* When hovering over the PiP video window, users can: 1. Close the window via the close button ![close.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/9137969608604.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](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/9137970882460.png) 6. Switch the video in the PiP player with the primary video via the switch button ![PiP](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/9137970883484.png) ![Side-by-side](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/9137970886044.png) *Primary video and PiP mode hover state example (Responsive desktop)* #### PiP and menu panels With the primary menu active, the PiP window displays in the top-right corner of the screen. ![PiP](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/9137969614492.png) *PiP with primary menu active example (Responsive desktop)* With the secondary menu active, the PiP window is pinned to the top of the right panel. ![Side-by-side](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/9137970890140.png) *PiP with secondary menu active example (Responsive desktop)* > [!NOTE] > **Note:**PiP functionality is not currently available for responsive web Android or AndroidTV. Select the PiP button ![Side-by-side](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/9137970877596.png) (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. ![PiP](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/9137969619484.png) *Primary video and PiP mode example (Responsive tablet)* ![PiP](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/9137970893852.png) *Primary video and PiP mode example (Responsive mobile)* In the PiP window, users can: 1. Close the window via the close button ![close.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/9137969608604.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](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/9137970882460.png) 6. Switch the video in the PiP player with the primary video via the switch button ![PiP](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/9137970883484.png) ![PiP](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/9137969623452.png) *Primary video and PiP mode hover state example (Responsive tablet)* ![PiP](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/9137970900124.png) *Primary video and PiP mode hover state example (Responsive mobile)* #### PiP and menu panels With the primary menu active, the PiP window displays in the top-right corner of the screen. ![](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/9137944290588.png) *PiP with primary menu active example (Responsive tablet)* ![](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/9137944618780.png) *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. ![](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/9137966466460.png) *PiP with secondary menu active example (Responsive desktop)* ![](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/9137982185884.png) *PiP with secondary menu active example (Responsive mobile)* #### Responsive mobile controls 1. Drag the PiP window to the desired location 2. Tap the ![PiP_Play_Icon.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4412443964050.png) / ![PiP_Pause_Icon.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4412435841554.png) toggle to control video playback 3. Tap the seek ![skip_back_15_seconds.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4412429906194.png) / ![skip_forward_15_seconds.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4412443969170.png) icons to skip back or forward in 15-second increments. The seekbar highlights the content duration. 4. Tap the ![ios_Pip_expand.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4412429932562.png) icon to enter the full-screen view, closing the PiP window 5. Tap the ![Close_PiP.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4412429944850.png) icon to dismiss the PiP window, saving the contents resume point Tap the ![HTML5_iOS_PiP_contract.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4412443949842.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] > **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 on 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_.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4412444012690.png)![iOS_Tablet_-_PIP_screen__Final_Crop_.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4412444026130.png) #### iOS controls 1. Drag the PiP window to the desired location 2. Tap the ![PiP_Play_Icon.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4412443964050.png) / ![PiP_Pause_Icon.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4412435841554.png) toggle to control video playback 3. Tap the seek ![skip_back_15_seconds.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4412429906194.png) / ![skip_forward_15_seconds.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4412443969170.png) icons to skip back or forward in 15-second increments. The seekbar highlights the content duration. 4. Tap the ![ios_Pip_expand.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4412429932562.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](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4412429944850.png) icon to dismiss the PiP window, saving the contents resume point. On returning to the video player, the video is paused. > [!NOTE] > 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_.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4412429989138.png)![Android_Tablet_-_PIP_screen__Final_Crop_.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4412435969170.png) #### Android controls 1. Drag the PiP window to the desired location 2. Tap the ![PiP_Play_Icon.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4412443964050.png) / ![PiP_Pause_Icon.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4412435841554.png) toggle to control video playback 3. Tap the seek ![skip_back_15_seconds.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4412429906194.png) / ![skip_forward_15_seconds.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4412443969170.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](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4412444097810.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](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4412430041490.png) icon to manage the integrated application's PiP settings 6. Tap the ![Close_PiP.png](https://cdn.document360.io/2e698e3c-4773-44a4-9476-1d05bac85eee/Images/Documentation/4412429944850.png) icon to dismiss the PiP window, saving the contents resume point. On returning to the video player, the video is paused.