CSS :picture-in-picture 擬似クラス
利用可能性は限定的
この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。
Want more support for this feature? Tell us why.
構文
css
:picture-in-picture {
/* ... */
}
使用上のメモ
:picture-in-picture 擬似クラスを使用すると、動画がピクチャインピクチャと従来の表示モードの間で切り替わるときに、コンテンツの大きさ、スタイル、レイアウトを自動的に調整するようにスタイルシートを設定することができます。
例
この例では、動画が浮遊ウィンドウで表示されたときにボックスシャドウ付きになります。
HTML
このページの HTML は次のようになります。
html
<h1>MDN Web Docs デモ: :picture-in-picture 擬似クラス</h1>
<p>
このデモでは、<code>:picture-in-picture</code> 擬似クラスを使用して、CSS だけで動画のスタイルを自動的に変更しています。
</p>
<video id="pip-video"></video>
ID が "pip-video" の <video> は、ピクチャインピクチャの浮遊ウィンドウに表示されているかどうかで、赤いボックスシャドウを持つか持たないかが変化します。
CSS
その秘密は CSS に現れます。
css
:picture-in-picture {
box-shadow: 0 0 0 5px red;
}
仕様書
| 仕様書 |
|---|
| Selectors Level 4 # pip-state |