Full Screen Autoplay Video Scale To Fill Viewport?

Design help Layout & Design
1

Hey, I’ve been looking through everything I can find online and even digging into HTML and CSS a bit for the first time but I cannot find a proper solution so far.

My goal is a (website header) full screen background video.

Ive created a vimeo embed that works great on native 16:9 desktops but on mobile or other browser sizing the video does not FILL the viewport aka it doesnt scale dynamically.

Is there any way to get this to work?

Here is the vimeo HTML Embed i use

<div style="padding:56.25% 0 0 0;position:relative;">
<iframe 
src="https://player.vimeo.com/video/934584474?h=e77d1fa27a&amp;badge=0&amp;background=1&quality=1080p&autoplay=1&loop=1&autopause=0&amp?muted=1;player_id=0&amp;app_id=58479" frameborder="0" 
allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" 
title="Website Background Montage_4 h265 2K">
</iframe>
</div>

and i added the vimeo api to the page “before body tag” field:

<script src="https://player.vimeo.com/api/player.js"></script>

I guess the vimeo iframe wont allow scalling to viewport width and height, so a CSS style is the solution maybe?

Very grateful for any hints!!

Cheers

G