:picture-in-picture
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die :picture-in-picture
-CSS-Pseudoklasse entspricht dem Element, das sich derzeit im Bild-in-Bild-Modus befindet.
Syntax
:picture-in-picture {
/* ... */
}
Verwendungsnotizen
Die Pseudoklasse :picture-in-picture
ermöglicht es Ihnen, Ihre Stylesheets so zu konfigurieren, dass die Größe, der Stil oder das Layout von Inhalten automatisch angepasst werden, wenn ein Video zwischen Bild-in-Bild- und traditionellem Präsentationsmodus wechselt.
Beispiele
In diesem Beispiel hat ein Video einen Schatten, wenn es im schwebenden Fenster angezeigt wird.
HTML
Das HTML der Seite sieht wie folgt aus:
<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>
Das <video>
mit der ID "pip-video"
wechselt zwischen einem roten Schatten oder keinem Schatten, abhängig davon, ob es im Bild-in-Bild schwebenden Fenster angezeigt wird oder nicht.
CSS
Die Magie passiert im CSS.
:picture-in-picture {
box-shadow: 0 0 0 5px red;
}
Spezifikationen
Specification |
---|
Selectors Level 4 # pip-state |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
: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.