blob: a234ae1e21e8875e1ca28994cfdb5da8d43a1f5b (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
---
title: ':picture-in-picture'
slug: Web/CSS/:picture-in-picture
tags:
- CSS
- Picture-in-Picture
- Picture-in-Picture API
- 擬似クラス
- リファレンス
- セレクター
- 動画
- pip
browser-compat: css.selectors.picture-in-picture
translation_of: Web/CSS/:picture-in-picture
---
{{CSSRef}}
**`:picture-in-picture`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、現在ピクチャインピクチャモードの要素に一致します。
## 構文
{{csssyntax}}
## 使用上のメモ
`: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"` の {{HTMLElement("video")}} は、ピクチャインピクチャの浮遊ウィンドウに表示されているかどうかで、赤いボックスシャドウを持つか持たないかが変化します。
### CSS
The magic happens in the CSS.
```css
:picture-in-picture {
box-shadow: 0 0 0 5px red;
}
```
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- [Picture-in-picture API](/ja/docs/Web/API/Picture-in-Picture_API)
- {{DOMxRef("HTMLVideoElement.requestPictureInPicture()")}}
- {{DOMxRef("HTMLVideoElement.autoPictureInPicture")}}
- {{DOMxRef("HTMLVideoElement.disablePictureInPicture")}}
- {{DOMxRef("Document.pictureInPictureEnabled")}}
- {{DOMxRef("Document.exitPictureInPicture()")}}
- {{DOMxRef("Document.pictureInPictureElement")}}
|
