Vimeo Video iFrame - On Mobile fill Screen (Hide Sides with Pan over Video)

Question

I developing a website with a video as a hero image which is always fullscreen. Easy thing on desktop. Video is hosted on VIMEO.

But now the hard part.

1. On mobile the video should take 100vh. The overflown sides should be hidden.
2. There should be a pan over the video. From left to right.

For know i could not manage to make the video flow over the sides. Any idea or experiences? I tried various solutions provided online didnt change a lot.

Thanks a log 🙌🏼🫶🏻

Code for Desktop fullsceen:

    .video-responsive-home {
        padding-top: 0;
        height: 0;
        overflow: hidden;
         --videoRatio: calc(16 / 9);
    }

    .video-responsive-item-home {
        position: absolute;
        top: 0;
        left: 0;
        --w: 100vw;
        --h: calc(var(--w) / var(--videoRatio));
        height: var(--h);
        width: var(--w);
    }

<div class="video-responsive-home">
 <iframe class="video-responsive-item-home" 
    src="https://player.vimeo.com/video/707269251?autoplay=1&loop=1&muted=1"    
    frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen>
 </iframe>
</div>