:picture-in-picture
Quick Summary for :picture-in-picture
The :picture-in-picture CSS pseudo-class matches the element which is currently in picture-in-picture mode.
Code Usage for :picture-in-picture
<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> 
More Details for :picture-in-picture

:picture-in-picture

The :picture-in-picture CSS pseudo-class matches the element which is currently in picture-in-picture mode.

Syntax

:picture-in-picture

Usage notes

The :picture-in-picture pseudo-class lets you configure your stylesheets to automatically adjust the size, style, or layout of content when a video switches back and forth between picture-in-picture and traditional presentation modes.

Examples

In this example, a video has a box shadow when it is displayed in the floating window.

HTML

The page's HTML looks like this:

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

The <video> with the ID "pip-video" will change between having a red box shadow or not, depending on whether or not it is displayed in the picture-in-picture floating window.

CSS

The magic happens in the CSS.

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

Specifications

No specification found

No specification data found for css.selectors.picture-in-picture.Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

No compatibility data found for css.selectors.picture-in-picture.Check for problems with this page or contribute missing data to mdn/browser-compat-data.

See also

Picture-in-picture API HTMLVideoElement.requestPictureInPicture() HTMLVideoElement.autoPictureInPicture HTMLVideoElement.disablePictureInPicture Document.pictureInPictureEnabled Document.exitPictureInPicture() Document.pictureInPictureElement

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)日本語 Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
"Let us prepare our minds as if we'd come to the very end of life. Let us postpone nothing. Let us balance life's books each day ... The one who puts the finishing touches on their life each day is never short of time."
Seneca
Random CSS Property

conic-gradient()

The conic-gradient() CSS function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). Example conic gradients include pie charts and color wheels. The result of the conic-gradient() function is an object of the <gradient> data type, which is a special kind of <image>.
conic-gradient() css reference