Picture-in-Picture Mode

The LiSA Media Player supports two distinct Picture-in-Picture (PiP) modes, designed to enhance user experience across different types of web applications:

SPA PiP Mode (Single Page Applications)

• Default Mode: The player operates as a floating player, resuming playback in the corner of the browser's viewport while you navigate within the web page.

• Behavior: Playback may be interrupted if you navigate to a new page, depending on the configuration of that page.

• Use Case: Ideal for single page applications (SPA) where the DOM remains intact during navigation. However, if the entire DOM is reloaded, consider using Static PiP Mode.

Static PiP Mode (Static Websites)

• Behavior: Enables seamless unmuted playback even as users navigate to other pages within the same domain.

• Use Case: Perfect for static websites or multi-page applications where uninterrupted playback across pages is required.

---

Prerequisites for Static PiP Mode

To enable Static PiP Mode, the LiSA Media Player renders the original page in an iframe and places the floating player on top. For this functionality to work correctly, you must configure the Content-Security-Policy (CSP) header with the frame-ancestors directive to allow the page to render within an iframe on the same origin.

CSP Configuration

You can configure the required settings either via HTTP headers or HTML meta tags:

HTTP Headers

content-security-policy: frame-ancestors 'self';
x-frame-options: SAMEORIGIN;

HTML Meta Tags

<meta http-equiv="Content-Security-Policy" content="frame-ancestors 'self'">
<meta http-equiv="X-Frame-Options" content="SAMEORIGIN">

The x-frame-options header is deprecated and should only be used for compatibility with older browsers.

Important Notes

• If CSP settings prevent the page from rendering in the iframe, the LiSA Media Player will automatically fall back to SPA PiP Mode.

• Ensure the frame-ancestors directive explicitly allows the same origin to avoid playback interruptions.