Enhanced Picture-in-Picture

Standard vs enhanced Picture-in-Picture

Firework player supports two different Picture-in-Picture (PiP) modes: standard and enhanced.

By default, the player uses the standard PiP mode. The player can turn into a floating player and allow you to browse the web page while keeping the playback in the corner. However, when you navigate away to a different page, the video playback may be interrupted depending on the setting of the targeted page.

You can enable enhanced Picture-in-Picture (PiP) by setting the player attribute pip="true" or asking the partner success team to update the channel config. When enhanced PiP is enabled, and you navigate to other pages on the same domain, the unmuted playback will be carried over seamlessly.

For enhanced PiP to work, some prerequisites are explained in the next section.

Enhanced Picture in Picture mode requirements

Firework’s enhanced Picture-in-Picture feature renders the original page in an iframe and places the player on top. Therefore, the Content-Security-Policy HTTP header with frame-ancestors directive is needed to render the page in the iframe on the same origin. This can be achieved either by CSP HTTP header or HTML meta tag.

HTTP header value:

• content-security-policy: frame-ancestors 'self'

• x-frame-options: SAMEORIGIN

HTML meta header tags:

• <meta http-equiv="Content-Security-Policy" content="frame-ancestors 'self'">

• <meta http-equiv="X-Frame-Options" content="SAMEORIGIN">

Please note, x-frame-options is obsolete and should be only used in case you want to support older browsers.

If CSP blocks the website from rendering in the iframe we fall back to the standard PiP mode.

Can we disable the PiP player on certain pages?

When in enhanced PiP mode, you can use the close() method described in the Web SDK section to close the PiP player.

When in standard PiP mode, you can remove the Firework script tag from the pages where you do not want the player to load.

Why is my website reloading when closing the enhanced PiP player?

The enhanced PiP mode renders the original page in an iframe so the actual player can break through the page boundary. When the user closes the PiP player, we remove the iframe and reload the actual page to where the user was in the iframe. If this user experience is not ideal for your use case, we recommend using the standard PiP mode.