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.
npm install msc-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.
<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
``html`
src="https://unpkg.com/msc-any-pip/mjs/wc-msc-any-pip.js">
- Structure
Put <msc-any-pip /> into HTML document. It will have different functions and looks with attribute mutation.
`html
Otherwise, developers could also choose
to fetch config for <msc-any-pip />.`html
...
>
`JavaScript Instantiation
<msc-any-pip /> could also use JavaScript to create DOM element. Here comes some examples.
html
`Style Customization
Developers could apply styles to decorate <msc-any-pip />'s looking.
html
`Otherwise delevelopers could also add className -
to make <msc-any-pip />'s size same as container's size.（default is inline-size: 100% only）`html
...
`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
. （Picture-in-Picture's min window width is 300）`html
...
`- winheight
Set Picture-in-Picture window height. Default is <msc-any-pip />'s
. （Picture-in-Picture's min window height is 300）`html
...
`- disallowreturntoopener
Hides the "back to tab" button in the Picture-in-Picture window if true. It is false by default (not set).
html
...
`- preferinitialwindowplacement
Open the Picture-in-Picture window in its default position and size if true. It is false by default (not set).
html
...
`- dismisswhenbacktoopener
Auto dismiss the Picture-in-Picture window when user switch back to the opener window if true. It is false by default (not set)..
html
...
``| 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. |
| dismisswhenbacktoopener | Boolean | Getter / Setter for dismisswhenbacktoopener. Auto dismiss the Picture-in-Picture window when user switch back to the opener window if true. It is false by default. |
| Mathod Signature | Description |
| ----------- | ----------- |
| requestPictureInPicture | Request <msc-any-pip /> turn in Document Picture-in-Picture mode. |
| Event Signature | Description |
| ----------- | ----------- |
| msc-any-pip-piping | Fired when user press confirm. |
| msc-any-pip-pip-end | Fired when Picture-in-Picture end. |
- Picture-in-Picture for any Element, not just
- <msc-any-pip />
- WEBCOMPONENTS.ORG
- YouTube