:picture-in-picture

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

:picture-in-pictureCSS擬似クラスで、現在ピクチャインピクチャモードの要素に一致します。

構文

:picture-in-picture

使用上のメモ

:picture-in-picture 擬似クラスを使用すると、動画がピクチャインピクチャと従来の表示モードの間で切り替わるときに、コンテンツの大きさ、スタイル、レイアウトを自動的に調整するようにスタイルシートを設定することができます。

この例では、動画が浮遊ウィンドウで表示されたときにボックスシャドウ付きになります。

HTML

このページの HTML は次のようになります。

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>

ID が "pip-video"<video> は、ピクチャインピクチャの浮遊ウィンドウに表示されているかどうかで、赤いボックスシャドウを持つか持たないかが変化します。

CSS

The magic happens in the CSS.

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

仕様書

Specification
Selectors Level 4
# pip-state

ブラウザーの互換性

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.

関連情報