:picture-in-picture
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
The :picture-in-picture CSS pseudo-class matches the element which is currently in picture-in-picture mode.
Syntax
:picture-in-picture {
/* ... */
}
Usage notes
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.
Examples
In this example, a video has a box shadow when it is displayed in the floating window.
HTML
The page's HTML looks like this:
<h1>MDN Web Docs Demo: :picture-in-picture pseudo-class</h1>
<p>
This demo uses the <code>:picture-in-picture</code> pseudo-class to
automatically change the style of a video entirely using CSS.
</p>
<video id="pip-video"></video>
The <video> with the ID "pip-video" will change between having a red box shadow or not, depending on whether or not it is displayed in the picture-in-picture floating window.
CSS
The magic happens in the CSS.
:picture-in-picture {
box-shadow: 0 0 0 5px red;
}
Specifications
| Specification |
|---|
| Selectors Level 4 # pip-state |
Browser compatibility
Loading…