:picture-in-picture

:picture-in-picture

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

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

このページの 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> は、ピクチャインピクチャの浮遊ウィンドウに表示されているかどうかで、赤いボックスシャドウを持つか持たないかが変化します。

The magic happens in the CSS.

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

• Picture-in-picture API
• HTMLVideoElement.requestPictureInPicture()
• HTMLVideoElement.autoPictureInPicture (en-US)
• HTMLVideoElement.disablePictureInPicture
• Document.pictureInPictureEnabled
• Document.exitPictureInPicture()
• Document.pictureInPictureElement