:picture-in-picture CSS-Pseudoklasse
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Die :picture-in-picture CSS Pseudoklasse entspricht dem Element, das sich derzeit im Bild-in-Bild-Modus befindet.
Syntax
:picture-in-picture {
/* ... */
}
Anmerkungen zur Nutzung
Die :picture-in-picture-Pseudoklasse 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-Modus und herkömmlicher Präsentationsweise wechselt.
Beispiele
In diesem Beispiel hat ein Video einen Box-Shadow, wenn es im schwebenden Fenster angezeigt wird.
HTML
Das HTML der Seite sieht so 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" wird zwischen einem roten Box-Shadow wechseln oder nicht, abhängig davon, ob es im schwebenden Bild-in-Bild-Fenster angezeigt wird oder nicht.
CSS
Das Besondere passiert im CSS.
:picture-in-picture {
box-shadow: 0 0 0 5px red;
}
Spezifikationen
| Spezifikation |
|---|
| Selectors Level 4 # pip-state |