:picture-in-picture
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Lớp giả :picture-in-picture trong CSS (pseudo-class) khớp với phần tử hiện đang ở chế độ picture-in-picture.
Cú pháp
css
:picture-in-picture {
/* ... */
}
Ghi chú sử dụng
Lớp giả :picture-in-picture cho phép bạn cấu hình stylesheet để tự động điều chỉnh kích thước, kiểu dáng hoặc bố cục nội dung khi video chuyển đổi qua lại giữa chế độ picture-in-picture và chế độ hiển thị thông thường.
Ví dụ
Trong ví dụ này, một video có bóng đổ hộp khi được hiển thị trong cửa sổ nổi.
HTML
HTML của trang trông như sau:
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>
Phần tử <video> có ID "pip-video" sẽ thay đổi giữa việc có hoặc không có bóng đổ hộp màu đỏ, tùy thuộc vào việc nó có đang được hiển thị trong cửa sổ nổi picture-in-picture hay không.
CSS
Phần quan trọng nằm ở CSS.
css
:picture-in-picture {
box-shadow: 0 0 0 5px red;
}
Thông số kỹ thuật
| Specification |
|---|
| Selectors Level 4 # pip-state |