Cropping the relevant part of the browser window after identifying the location of the interested element

I have a webpage where I’ve embedded a YouTube video in an iframe. I need to capture the screenshot of the YouTube video. Using libraries like html2canvas and dom2image didn’t work because of cross-domain limitations.

So, I came up with the idea of capturing the screenshot of the full browser window using getDisplayMedia() and then cropping the relevant part using drawImage(). In my head, it seems to make complete sense, just identifying the location of the iframe and then using drawImage to crop it. However, it does not crop the relevant part in all screen sizes. When I change screen resolution or zoom in, it seems to break.

Another idea would be to write an AI algorithm to capture this. But I think that is an overkill. Any ideas on how to make it work for all screen sizes and resolutions?

<h1>Hello</h1>
<div style="margin: 10;">
    <iframe 
        id="youtubeiframe" 
        width="640" 
        height="340" 
        src="https://www.youtube.com/embed/vDYP6AKw8bk?controls=0" 
        title="YouTube video player" frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
    </iframe>
</div>
<div id="picture" style="margin-top:60; background-color:'gray'"></div> 

<script>
        navigator.mediaDevices.getDisplayMedia({ preferCurrentTab: true }).then(stream => {
        captureStream = stream;
        track = captureStream.getVideoTracks()[0];
        const canvas = document.createElement("canvas");
        const context = canvas.getContext("2d");
        const offsets = document.getElementById("youtubeiframe")?.getBoundingClientRect();
        const posX = offsets.left;
        const posY = offsets.top;
        const width = offsets.width;
        const height = offsets.height;
        canvas.width = width;
        canvas.height = height;

        let image = new ImageCapture(track);
        const bitmap = image.grabFrame().then(bitmap => {
            context?.drawImage(bitmap, posX, posY, width, height, 0, 0, width, height);
            const pic = document.getElementById("picture");
            if(pic.childElementCount > 0)
                pic.replaceChild(canvas,pic.children[0]);
            else
                pic.appendChild(canvas);
        });
        
    });
    
</script>