async toggleDocumentPictureInPicture_() {
    // Close Picture-in-Picture window if any.
    if (window.documentPictureInPicture.window) {
      window.documentPictureInPicture.window.close();
      return;
    }

    // Open a Picture-in-Picture window.
    const pipPlayer = this.videoContainer_;
    const rectPipPlayer = pipPlayer.getBoundingClientRect();
    const pipWindow = await window.documentPictureInPicture.requestWindow({
      width: rectPipPlayer.width,
      height: rectPipPlayer.height,
    });

    // Copy style sheets to the Picture-in-Picture window.
    this.copyStyleSheetsToWindow_(pipWindow);

    // Add placeholder for the player.
    const parentPlayer = pipPlayer.parentNode || document.body;
    const placeholder = this.videoContainer_.cloneNode(true);
    placeholder.style.visibility = 'hidden';
    placeholder.style.height = getComputedStyle(pipPlayer).height;
    parentPlayer.appendChild(placeholder);

    // Make sure player fits in the Picture-in-Picture window.
    const styles = document.createElement('style');
    styles.append(`[data-shaka-player-container] {
      width: 100% !important; max-height: 100%}`);
    pipWindow.document.head.append(styles);

    // Move player to the Picture-in-Picture window.
    pipWindow.document.body.append(pipPlayer);

    // Listen for the PiP closing event to move the player back.
    this.eventManager_.listenOnce(pipWindow, 'pagehide', () => {
      placeholder.replaceWith(/** @type {!Node} */(pipPlayer));
    });
  }
The Document Picture-in-Picture API makes it possible to open an
always-on-top window that can be populated with arbitrary HTML content.
https://developer.chrome.com/docs/web-platform/document-picture-in-picture
@private