:picture-in-picture

Ограниченная доступность

Эта функция не относится к Baseline, так как она не работает во всех наиболее широко используемых браузерах.

Псевдокласс :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;
}

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

Спецификация
Селекторы уровня 4 # pip-state

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`:picture-in-picture`	110	110	Нет	96	13.1	110	Нет	74	13.4	21.0	110

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:picture-in-picture