: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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
: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.

Siehe auch