: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 CSS 伪类匹配当前处于画中画模式的元素。

语法

css
:picture-in-picture {
  /* ... */
}

使用说明

:picture-in-picture 伪类允许你配置样式表，以便视频在画中画或者传统播放模式来回切换时自动调整内容的大小、样式或布局。

示例

在此示例中，当视频在浮动窗口显示时，会有盒状阴影。

HTML

页面的 HTML 如下所示：

html
<h1>MDN Web Docs 演示：:picture-in-picture 伪类</h1>

<p>
  此演示使用 CSS <code>:picture-in-picture</code>
  伪类自动改变视频的完整样式。
</p>

<video id="pip-video"></video>

ID 为 "pip-video" 的 <video> 会根据是否在画中画浮动窗口中而在是否带有一个红色的阴影之间变换。

CSS

这一效果发生在 CSS 中。

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

规范

Specification
Selectors Level 4
# pip-state

浏览器兼容性

BCD tables only load in the browser

参见