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

:picture-in-picture

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

No specification data found for css.selectors.picture-in-picture.Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

No compatibility data found for css.selectors.picture-in-picture.Check for problems with this page or contribute missing data to mdn/browser-compat-data.

See also

Last modified: Aug 12, 2021, by MDN contributors