The :picture-in-picture CSS pseudo-class matches the element which is currently in picture-in-picture mode.


Syntax not found in DB!

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.


In this example, a video has a box shadow when it is displayed in the floating window.


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.


The magic happens in the CSS.

:picture-in-picture {
  box-shadow: 0 0 0 5px red;


Specification Status Comment
The definition of ':picture-in-picture' in that specification.
Unknown Initial definition.

Browser compatibility

No compatibility data found. Please contribute data for "css.selectors.picture-in-picture" (depth: 1) to the MDN compatibility data repository.

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.