CSS :picture-in-picture Pseudo Class - Playground Example

<!DOCTYPE html><html><head><style type="text/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;
}</style></head><body><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></body></html>