<div style="display:flex;flex-direction: column;align-items: center;">
    <div style="display: flex;flex-direction: column;">
        <video controls id="video-pip" style="border: 1px solid black;" src="test.mp4"></video>
        <button id='startPiP' style="width: 100%;">startPiP</button>
    </div>
</div>

const pipBtn = document.getElementById('startPiP');
function canNotUsedPiP(){
    pipBtn.textContent = "ご利用のブラウザでPiPは使用できません";
}
pipBtn.addEventListener('click', async()=>{
    const video = document.getElementById('video-pip');
    try{
        // video.requestPictureInPictureがメソッドではなかった場合PiPは開かない.
        if(typeof video.requestPictureInPicture !== "function")return canNotUsedPiP();
        await video.requestPictureInPicture();
    }catch(e){
        canNotUsedPiP();
    }
});

<div style="display:flex;flex-direction: column;align-items: center;">
    <div style="display: flex;flex-direction:column;">
        <!-- DPiPはノードが異なるため直接styleを記述するかDPiPウィンドウにstyleをコピーする必要があります -->
        <div class="videos-position" style="display: flex;flex-direction: column;">
            <video controls style="border: 1px solid black;" src="test.mp4"></video>
            <span>video以外も対象にできます。</span>
        </div>
        <button id='startDPiP' style="width: 100%;background-color: #88f;">startDPiP</button>
    </div>
</div>
                

document.addEventListener("DOMContentLoaded", () => {
    const dpipBtn = document.getElementById('startDPiP');
    // documentPictureInPicture.requestWindowがメソッドではなかった場合DPiPは開けない.
    if (typeof documentPictureInPicture.requestWindow !== "function") return canNotUsedDPiP();
    function canNotUsedDPiP() {
        dpipBtn.textContent = "ご利用のブラウザでDPiPは使用できません";
    }
    dpipBtn.addEventListener('click', async () => {
        const cloneTarget = document.querySelector('.videos-position');
        // divを子ごとクローンする.
        const cloneElement = cloneTarget.cloneNode(true);
        //
        const cloneVideo = cloneElement.querySelector("video");
        try {
            //　DPiPのwindowを生成.
            const dpipWindow =await documentPictureInPicture.requestWindow();
            // videoのクローンをDPiPのbodyに移動させる
            dpipWindow.document.body.appendChild(cloneElement);
            // DPiPが消えたとき、cloneしたElementを確実に消す.
            dpipWindow.addEventListener("pagehide",()=>{
                if(cloneVideo){
                    cloneVideo.pause();
                    cloneVideo.src = "";
                }
                cloneElement.remove();
            });
        } catch (e) {
            canNotUsedDPiP();
            if(cloneVideo){
                cloneVideo.pause();
                cloneVideo.src = "";
            }
            cloneElement.remove();
        }
    });
});