CSS pseudo-class ":picture-in-picture" Sample

Available in Chrome 110+ | View on GitHub | Browse Samples

Background

The Picture-in-Picture API allows websites to create a floating video window that is always on top of other windows so that users may continue consuming media while they interact with other sites or applications on their device. In Chrome 110, a CSS pseudo-class is added to help web developers customize the media player when videos enter and exit Picture-in-Picture.

Credits: Media files are © copyright Blender Foundation | www.blender.org.

Live Output

CSS Snippet

#video {
  display: block;
  width: 100%;
  height: 360px;
  will-change: opacity;
}

#video:not([controls]):picture-in-picture {
  opacity: 0;
}

#video-container {
  background: #000;
  position: relative;
}

#video-container:has(video:picture-in-picture)::before {
  bottom: 36px;
  color: #ddd;
  content: 'Video is now playing in a Picture-in-Picture window';
  position: absolute;
  right: 36px;
}

JavaScript Snippet

togglePipButton.addEventListener('click', async function(event) {
  togglePipButton.disabled = true;
  try {

    if (video !== document.pictureInPictureElement)
      await video.requestPictureInPicture();
    else
      await document.exitPictureInPicture();

  } catch(error) {
    log(`> Argh! ${error}`);
  } finally {
    togglePipButton.disabled = false;
  }
});

/* Feature support */

if ('pictureInPictureEnabled' in document) {
  // Set button ability depending on whether Picture-in-Picture can be used.
  setPipButton();
  video.addEventListener('loadedmetadata', setPipButton);
  video.addEventListener('emptied', setPipButton);
} else {
  // Hide button if Picture-in-Picture is not supported.
  togglePipButton.hidden = true;
}

function setPipButton() {
  togglePipButton.disabled = (video.readyState === 0) ||
                             !document.pictureInPictureEnabled ||
                             video.disablePictureInPicture;
}