<picture-in-picture>

A custom element that offers a declarative interface to the Picture-in-Picture API.

Demo

Customize component Video by Blender - Licensed CC-BY 3.0

HTML

CSS

picure-in-picture.custom-styles::part(pip-button) {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(1px);
  color: #ffffff;
  cursor: pointer;
  appearance: none;
}

picture-in-picture.custom-styles::part(pip-button):hover {
  background-color: #000000;
}

Source

Source code and documentation can be found in Github repository.

License

The MIT License (MIT)