Adding Picture in Picture to Your Safari Media Controls
Create a custom control that adds Picture in Picture to your Safari media player.
Although default controls are available for audio and video elements in your Safari webpage, you can also create your own custom media controls. One of the custom controls you should add is Picture in Picture. With Picture in Picture, your video remains in view in a floating video overlay while users interact with other apps.
Write Markup for a Custom Control
In this example, the custom controls for a video have only a Play button and a hidden Pause button:
Add a Picture-in-Picture Element to Your Markup
The custom controls now include markup for a new picture-in-picture button, which is visible by default.
Add Functionality to the Button
Add a function to toggle Picture in Picture using the webkitSetPresentationMode property from the presentation mode API.