: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

css
: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:

html
<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.

css
:picture-in-picture {
  box-shadow: 0 0 0 5px red;
}

Spezifikationen

Specification
Selectors Level 4
# pip-state

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch