Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
: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-pictureCSSPseudo-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></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 |