Day 17: the :picture-in-picture pseudo-class

You can use the :picture-in-picture pseudo-class to style an element, usually a <video>, which is currently in picture-in-picture mode (PIP).

Clicking the following button puts the video in picture-in-picture mode in supporting browsers (Chrome, Edge, Safari, Opera). Firefox doesn’t support the API, but you can right-click the video and select “Watch in Picture-in-Picture“.

When the video is playing in PIP mode, the placeholder for the video switches to the :picture-in-picture state. Contrary to the information in the support table on MDN, none of the browsers, except for Safari, supports the pseudo-class. At least, according to my tests.

:picture-in-picture {
  opacity: 0.3;
  filter: blur(5px);
}

Here’s how the video placeholder, which by default is not blurred and has a black background color, looks like in Safari.

Video playing in the bottom right corner. The placeholder for the video has 50% opacity and is a bit blurred

My blog doesn’t support comments yet, but you can reply via blog@matuzo.at.


This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović

You can use the :picture-in-picture pseudo-class to style an element, usually a <video>, which is currently in picture-in-picture mode (PIP).

Clicking the following button puts the video in picture-in-picture mode in supporting browsers (Chrome, Edge, Safari, Opera). Firefox doesn't support the API, but you can right-click the video and select “Watch in Picture-in-Picture“.

When the video is playing in PIP mode, the placeholder for the video switches to the :picture-in-picture state. Contrary to the information in the support table on MDN, none of the browsers, except for Safari, supports the pseudo-class. At least, according to my tests.

:picture-in-picture {
  opacity: 0.3;
  filter: blur(5px);
}

Here's how the video placeholder, which by default is not blurred and has a black background color, looks like in Safari.

Video playing in the bottom right corner. The placeholder for the video has 50% opacity and is a bit blurred

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.


This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović


Print Share Comment Cite Upload Translate Updates
APA

Manuel Matuzović | Sciencx (2022-10-18T00:00:00+00:00) Day 17: the :picture-in-picture pseudo-class. Retrieved from https://www.scien.cx/2022/10/18/day-17-the-picture-in-picture-pseudo-class-2/

MLA
" » Day 17: the :picture-in-picture pseudo-class." Manuel Matuzović | Sciencx - Tuesday October 18, 2022, https://www.scien.cx/2022/10/18/day-17-the-picture-in-picture-pseudo-class-2/
HARVARD
Manuel Matuzović | Sciencx Tuesday October 18, 2022 » Day 17: the :picture-in-picture pseudo-class., viewed ,<https://www.scien.cx/2022/10/18/day-17-the-picture-in-picture-pseudo-class-2/>
VANCOUVER
Manuel Matuzović | Sciencx - » Day 17: the :picture-in-picture pseudo-class. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/10/18/day-17-the-picture-in-picture-pseudo-class-2/
CHICAGO
" » Day 17: the :picture-in-picture pseudo-class." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2022/10/18/day-17-the-picture-in-picture-pseudo-class-2/
IEEE
" » Day 17: the :picture-in-picture pseudo-class." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2022/10/18/day-17-the-picture-in-picture-pseudo-class-2/. [Accessed: ]
rf:citation
» Day 17: the :picture-in-picture pseudo-class | Manuel Matuzović | Sciencx | https://www.scien.cx/2022/10/18/day-17-the-picture-in-picture-pseudo-class-2/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts