Псевдокласс CSS `:picture-in-picture`

:picture-in-picture CSS-псевдокласс соответствует элементу, который в данный момент находится в режиме «картинка в картинке».

Синтаксис

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

Примечания по использованию

Псевдокласс :picture-in-picture позволяет настроить таблицы стилей так, чтобы автоматически изменять размер, стиль или макет содержимого при переключении видео между режимом «картинка в картинке» и обычным режимом отображения.

Примеры

В этом примере у видео появляется тень, когда оно отображается в плавающем окне.

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>

Элемент <video> с идентификатором "pip-video" будет отображаться с красной тенью или без неё в зависимости от того, показывается ли он в плавающем окне режима «картинка в картинке».

CSS

Всё самое интересное происходит в CSS.

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

Спецификации

Совместимость с браузерами

См. также

• API режима «картинка в картинке»
• HTMLVideoElement.requestPictureInPicture()
• HTMLVideoElement.disablePictureInPicture
• Document.pictureInPictureEnabled
• Document.exitPictureInPicture()
• Document.pictureInPictureElement