CSS :picture-in-picture

The :picture-in-picture pseudo-class matches a video element while it is being displayed in Picture-in-Picture mode. It is related to the Picture-in-Picture API, but the selector itself is CSS.

Syntax

video:picture-in-picture {
  outline: 0.25rem solid #2563eb;
}

Example

video:picture-in-picture {
  box-shadow: 0 0 0 0.25rem #2563eb;
}

video:not(:picture-in-picture) {
  box-shadow: none;
}

Result:

The style applies only while the browser has moved the video into Picture-in-Picture.

Important note

The user or script must actually enter Picture-in-Picture mode before the selector matches. Always keep the normal video state usable too.