:picture-in-picture Pseudo Class

:picture-in-picture CSS Pseudo Class

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The :picture-in-picture pseudo-class targets a media element - typically a video - when it is currently displayed in Picture-in-Picture (PiP) mode. This allows you to apply specific CSS styles only while the element is floating in its own always-on-top window, separate from the main document layout.

This pseudo-class is most commonly used with the video element, since Picture-in-Picture is primarily supported for video playback. When a user activates PiP (usually via the browser’s video controls or context menu), the browser automatically applies this pseudo-class to the relevant element.

What the pseudo-class does

When a video enters Picture-in-Picture mode:

It is removed from the normal document flow.
It appears in a floating window managed by the browser or operating system.
Styles inside your page do not affect the PiP window layout, but you can still adjust properties such as visibility, overlays, or related UI elements in the page itself.

The :picture-in-picture pseudo-class lets you respond visually to that state - for example, hiding placeholder elements, changing layouts, or indicating that PiP is active.

Basic example

video:picture-in-picture {
  outline: 3px solid #4a90e2;
}

This applies a visible outline to the video element only while it is in Picture-in-Picture mode.

Example with supporting UI behavior

video:picture-in-picture + .pip-status {
  display: block;
}

.pip-status {
  display: none;
  font-size: 14px;
  color: #555;
}

<video controls src="video.mp4"></video>
<div class="pip-status">Picture-in-Picture is active</div>

In this example, a message appears only when the video enters PiP mode.

The pseudo-class often works alongside :fullscreen, but the two are mutually exclusive - a video cannot be fullscreen and in Picture-in-Picture at the same time.
Layout-related properties such as display or visibility are commonly used to adjust UI elements when PiP is active.
Visual properties like object-fit may still affect how the video renders inside its container before entering PiP.

Notes and limitations

You cannot style the PiP window itself (size, position, or UI controls are browser-managed).
Support may vary slightly between browsers, especially on mobile.
The pseudo-class applies only while PiP is active - no JavaScript is required to detect it.

Syntax

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

Example

HTML

<div class="video-container">

  <video id="myVideo" controls src="audio/toy.mp4"></video>

  

  <div class="pip-overlay">Video is playing in mini-player</div>

  

  <button id="pipButton">Toggle Picture-in-Picture</button>

</div>

<script>

const video = document.getElementById('myVideo');

const pipButton = document.getElementById('pipButton');



pipButton.addEventListener('click', async () => {

  try {

    if (document.pictureInPictureElement) {

      await document.exitPictureInPicture();

    } else {

      await video.requestPictureInPicture();

    }

  } catch (error) {

    console.error("PiP failed", error);

  }

});

</script>

CSS

/* Default state for the overlay message */

.pip-overlay {

  display: none;

  background: rgba(0, 0, 0, 0.8);

  color: white;

  padding: 20px;

  text-align: center;

  width: 600px;

}



/* When the video enters PiP mode... */

video:picture-in-picture {

  opacity: 0.3;

  outline: 5px solid #007bff;

}



/* Use the pseudo-class to show the overlay message 

   only when the video is in PiP */

video:picture-in-picture + .pip-overlay {

  display: block;

}



/* Optional: hide the button when already in PiP */

video:picture-in-picture ~ #pipButton {

  visibility: hidden;

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS :picture-in-picture pseudo class. Hover over a browser icon to see the version that first introduced support for this CSS psuedo class.