:picture-in-picture
Quick Summary for :picture-in-picture
:picture-in-picture
CSS pseudo-class matches the element which is currently in picture-in-picture mode.
Code Usage for :picture-in-picture
<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>
More Details for :picture-in-picture
: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 foundNo 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
Picture-in-picture APIHTMLVideoElement.requestPictureInPicture()
HTMLVideoElement.autoPictureInPicture
HTMLVideoElement.disablePictureInPicture
Document.pictureInPictureEnabled
Document.exitPictureInPicture()
Document.pictureInPictureElement
Last modified: Aug 12, 2021, by MDN contributors
Select your preferred language English (US)日本語 Change language