Any PiP

Imaging what if we can let anything Picture-in-Picture (not only <video />) ?! Here comes <msc-any-pip /> to let it dream comes true.

<msc-any-pip /> apply Document Picture-in-Picture API to given elements have Picture-in-Picture feature.

Check the following examples and to press the 「PiP」 button (right-top corner) to see what can <msc-any-pip /> do ?

<msc-ez-video /> as child

<iframe /> as child

Image wall as child

Basic Usage

<msc-any-pip /> is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-any-pip />'s html structure and everything will be all set.

Required Script

<script type="module" src="https://your-domain/wc-msc-any-pip.js"> </script>

Structure

Put <msc-any-pip /> into HTML document. It will have different functions and looks with attribute mutation.

<msc-any-pip> <script type="application/json"> { "winwidth": 450, "winheight": 300, "disallowreturntoopener": false, "preferinitialwindowplacement": false } </script> <!-- Put any HTML element you like --> <div class="element-i-like-to-have-pip"> ... ... ... </div> </msc-any-pip>

Otherwise, developers could also choose remoteconfig to fetch config for <msc-any-pip />.

<msc-any-pip remoteconfig="https://your-domain/api-path" > ... ... ... </msc-any-pip>

JavaScript Instantiation

<msc-any-pip /> could also use JavaScript to create DOM element. Here comes some examples.

<script type="module"> import { MscAnyPip } from 'https://your-domain/wc-msc-any-pip.js'; const template = document.querySelector('.my-template'); // use DOM api const nodeA = document.createElement('msc-any-pip'); document.body.appendChild(nodeA); nodeA.appendChild(template.content.cloneNode(true)); // new instance with Class const nodeB = new MscAnyPip(); document.body.appendChild(nodeB); nodeB.appendChild(template.content.cloneNode(true)); nodeB.winwidth = 450; nodeB.winheight = 300; // new instance with Class & default config const config = { winwidth: 450, winheight: 300, disallowreturntoopener: false, preferinitialwindowplacement: true }; const nodeC = new MscAnyPip(config); document.body.appendChild(nodeC); nodeC.appendChild(template.content.cloneNode(true)); </script>

Style Customization

Developers could apply styles to decorate <msc-any-pip />'s looking.

<style> msc-any-pip { --msc-any-pip-piping-text: 'Playing in Picture-in-Picture.'; --msc-any-pip-piping-color: #39e75f; --msc-any-pip-piping-font-size: 16px; --msc-any-pip-button-z-index: 1; } </style>

Otherwise delevelopers could also add className - align-container-size to make <msc-any-pip />'s size same as container's size.（default is inline-size: 100% only）

<msc-any-pip class="align-container-size"> ... </msc-any-pip>

Attributes

<msc-any-pip /> supports some attributes to let it become more convenience & useful.

winwidth

Set Picture-in-Picture window width. Default is <msc-any-pip />'s clientWidth. （Picture-in-Picture's min window width is 300）

<msc-any-pip winwidth="450"> ... </msc-any-pip>

winheight

Set Picture-in-Picture window height. Default is <msc-any-pip />'s clientHeight. （Picture-in-Picture's min window height is 300）

<msc-any-pip winheight="300"> ... </msc-any-pip>

disallowreturntoopener

Hides the "back to tab" button in the Picture-in-Picture window if true. It is false by default (not set).

<msc-any-pip disallowreturntoopener> ... </msc-any-pip>

preferinitialwindowplacement

Open the Picture-in-Picture window in its default position and size if true. It is false by default (not set).

<msc-any-pip preferinitialwindowplacement> ... </msc-any-pip>

Properties

Property Name Type Description
winwidth Number Getter / Setter for Picture-in-Picture window width. Default is <msc-any-pip />'s clientWidth.
winheight Number Getter / Setter for Picture-in-Picture window height. Default is <msc-any-pip />'s clientHeight.
disallowreturntoopener Boolean Getter / Setter for disallowreturntoopener. Hides the "back to tab" button in the Picture-in-Picture window if true. It is false by default.
preferinitialwindowplacement Boolean Getter / Setter for preferinitialwindowplacement. Open the Picture-in-Picture window in its default position and size if true. It is false by default.

Mathod

Mathod Signature Description
requestPictureInPicture Request <msc-any-pip /> turn in Document Picture-in-Picture mode.

Events

Event Signature Description
msc-any-pip-piping Fired when Picture-in-Picture start.
msc-any-pip-pip-end Fired when Picture-in-Picture end.

Reference