Day 17: the :picture-in-picture pseudo-class
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.
Here's how the video placeholder, which by default is not blurred and has a black background color, looks like in Safari.
See on CodePen.