: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-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 |