:picture-in-picture

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

構文

Error: could not find syntax for this item

使用上のメモ

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

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

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.

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

仕様書

No specification found

No specification data found for css.selectors.picture-in-picture.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

ブラウザーの互換性

No compatibility data found for css.selectors.picture-in-picture.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.

関連情報