Can I change the source of the new Picture-in-Picture API on resize?

I am not sure if many developers have looked into the new PiP API from Google Chrome v70 but I need some help. I am trying to replace the video source on resize. Why? So I can give lower or higher resolution video's based on the PiP window size. Effectively creating a responsive PiP. However, I have run in multiple problems.

1 - I can only call a PiP on events fired by the user, meaning I can't open a PiP window based on a callback. Error: Uncaught (in promise) DOMException: Must be handling a user gesture to request picture in picture.

2 - I need to somehow wait until the new source is loaded, otherwise, I get the following error: Uncaught (in promise) DOMException: Metadata for the video element are not loaded yet.

In there demo they even suggest loading a smaller video on resize. Has anyone done this? Can anyone help me?

  videoElement.addEventListener('enterpictureinpicture', function(event) {
    pipWindow = event.pictureInPictureWindow;
    pipWindow.addEventListener('resize', onPipWindowResize);
  });

  videoElement.addEventListener('leavepictureinpicture', function() {
    pipWindow.removeEventListener('resize', onPipWindowResize);
  });

  function onPipWindowResize() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(async function() {
      await document.exitPictureInPicture();
      videoElement.setAttribute('src', './video-sd.mp4');
      await videoElement.requestPictureInPicture();
    }, 1000);
  }