:picture-in-picture

:picture-in-picture CSS 伪类 匹配当前处于画中画模式的元素。

语法

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

神奇之处在于 CSS 代码中。

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

规范

规范
选择器级别 4
# pip-state

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅