: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

css
: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:

html
<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.

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

Specifications

Specification
Selectors Level 4
# pip-state

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:picture-in-picture

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

See also