CSS :picture-in-picture Selector

❮ Previous Selectors Next ❯

Example

#video {
  display: block;
  width: 100%;
  height: 360px;
  will-change: opacity;
}

#video:not([controls]):picture-in-picture {
  opacity: 0;
}

#video-container {
  background: #000;
  position: relative;
}

#video-container:has(video:picture-in-picture)::before {
  bottom: 36px;
  color: #ddd;
  content: "Video is now playing in a Picture-in-Picture window";
  position: absolute;
  right: 36px;
}
Try this code ❯

Meaning

The :picture-in-picture selector matches the element which is currently in picture-in-picture mode.

The :picture-in-picture pseudo-class lets you configure your stylesheets to automatically adjust the size, style, or layout of content when a video switches back and forth between picture-in-picture and traditional presentation modes.

Version: CSS3



Standard Syntax

:picture-in-picture {
  css declarations;
}


Browser Support

The numbers in the table specify the first browser version that fully supports the property.



Status





❮ Previous Selectors Next ❯