iframe タグ（YouTube API) の動画をピクチャーインピクチャーで表示させたい

Question

いつもお世話になっております。

Laravel と Vue.js でポートフォリオを作っているのですが、YouTube API で取得した画像をピクチャーインピクチャーで表示させたいのですが、うまく実装できないので皆様のお力添えをいただきたいです。

#バージョン

PHP 7.3.26
Laravel Framework 6.20.16
vue@2.6.12

#該当のコードと現状

現状は vue-youtube という外部ライブラリを使って表示しています。

<youtube
        id="youtube_play"
        ref="youtube"
        :video-id="post.selected_videoId"
        :width="400"
        height="250"
        @playing="playingVideo()"
      />

ディベロッパーツールの elements では iframe タグで表示されています。
allow 属性には picture-in-picture とあるので、できなくはないと考えています。

<iframe
　id="youtube_play" 
　frameborder="0" 
　allowfullscreen="1" 
　allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
　title="YouTube video player"
　width="400" 
　height="250" 
　src="https://www.youtube.com/embed/null?enablejsapi=1&amp;origin=http%3A%2F%2F127.0.0.1%3A8000&amp;widgetid=2">
</iframe>

#試したこと

##① requestPictureInPicture の使用

pip() {
      const video = document.querySelector('iframe');
      console.log(video);
      video.requestPictureInPicture();
    }

結果

video.requestPictureInPicture is not a function"

とのエラー

##② togglePictureInPicture の使用

pip() {
      const video = document.querySelector('iframe');
      console.log(video);
      video.requestPictureInPicture();
    }

結果

video.togglePictureInPicture is not a function"

③ video として取得

調べたところ、上記2つは video タグにしか使えないようなので

const video = document.querySelector('video');
      console.log(video);
      video.requestPictureInPicture();

としてみるが、当然取得されず null になってしまう

④ YouTube API で取得した動画を video タグで表示

video タグで表示できれば最初の関数も使えそうなので

<video src="https://www.youtube.com/embed/null?enablejsapi=1&amp;origin=http%3A%2F%2F127.0.0.1%3A8000&amp;widgetid=2">

こんな感じで試してみるもうまくいかず。。

⑤ v-pip や vue-core-video-player の使用

vue のライブラリに v-pip や vue-core-video-player などもあるようなのですが、どちらも youtube api や iframe と組み合わせて使うのは難しそう

https://www.npmjs.com/package/v-pip
https://github.com/core-player/vue-core-video-player

以上になります。

個人的見解としては、「 video タグで YouTube を再生できたら全て解決するのではないか」と考えていますが、調べてみてもやはり外部動画の読み込みは iframe を用いるのが普通みたいで、なかなかうまくいきません。

知識不足、勉強不足な点は多々あると思いますが、皆様のお知恵をお借りできればと思います。

よろしくお願い致します。