Day 17: the :picture-in-picture pseudo-class

posted on

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

You can use the :picture-in-picture pseudo-class to style an element, usually a <video>, which is currently in picture-in-picture mode (PIP).

Clicking the following button puts the video in picture-in-picture mode in supporting browsers (Chrome, Edge, Safari, Opera). Firefox doesn't support the API, but you can right-click the video and select “Watch in Picture-in-Picture“.

When the video is playing in PIP mode, the placeholder for the video switches to the :picture-in-picture state. Contrary to the information in the support table on MDN, none of the browsers, except for Safari, supports the pseudo-class. At least, according to my tests.

:picture-in-picture {
  opacity: 0.3;
  filter: blur(5px);
}

Here's how the video placeholder, which by default is not blurred and has a black background color, looks like in Safari.

Video playing in the bottom right corner. The placeholder for the video has 50% opacity and is a bit blurred

See on CodePen

Further reading

Overview: 100 Days Of More Or Less Modern CSS