: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 Pseudo-Klasse selektiert das Element, das sich aktuell im Picture-in-Picture-Modus befindet.
Syntax
:picture-in-picture {
/* ... */
}
Nutzungshinweise
Die :picture-in-picture Pseudo-Klasse 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 dem Picture-in-Picture-Modus und dem traditionellen Präsentationsmodus wechselt.
Beispiele
In diesem Beispiel hat ein Video einen Rahmen-Schatten, wenn es im schwebenden Fenster angezeigt wird.
HTML
Das HTML der Seite sieht folgendermaßen 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 Rahmen-Schatten und keinem, je nachdem ob es im Picture-in-Picture 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
Loading…