: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

Specification
Selectors Level 4 # pip-state

Browser compatibility




Desktop
Mobile



Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
WebView Android
Chrome Android
Firefox for Android
Opera Android
Safari on IOS
Samsung Internet



:picture-in-picture
76
79
No
No
63
No
76
76
No
54
No
12.0


See also
 Picture-in-picture API HTMLVideoElement.requestPictureInPicture() HTMLVideoElement.autoPictureInPicture HTMLVideoElement.disablePictureInPicture Document.pictureInPictureEnabled Document.exitPictureInPicture() Document.pictureInPictureElement 

Found a problem with this page?

Edit on GitHub
Source on GitHub
Report a problem with this content on GitHub
Want to fix the problem yourself? See our Contribution guide.


Last modified: May 25, 2022, by MDN contributors


    
{'path': 'public/docs/css/:picture-in-picture.html', 'source': 'DevDocs.IO'}