Embedded Vimeo Video position different on a mobile device

Question

I'm having difficulty getting an embedded Vimeo iframe placed correctly on a mobile device (tested on an iPhone 12). For some reason, it's partly hidden under the menu at the top of the site and small, whereas, on an iPad and desktop, it looks and behaves fine.

The page can be viewed here http://www.chaostheoryvfx.com/reel/index.html

Here is the code:

HTML

<div class="video-wrapper">
<iframe src="http://player.vimeo.com/video/427549024?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

CSS

video-wrapper {
    text-align: center;
    position: absolute;
    left: 0;
    top: 100px;
    width: 100%;
    height: 100%;
}    
.video-wrapper iframe {
    position: relative;
    width: 100%;
    height: 100%;
}

I have looked everywhere for a fix, but can't seem to find anything online, so hoping someone on here can help.

Update:

If I add www at the beginning of the web link to chaostheory the Vimeo video is also oversized on a desktop and iPad, but remove the www, and the embedded video on these devices is set correctly. Any thoughts as to why this is happening?

https://chaostheoryvfx.com/reel/index.html

http://www.chaostheoryvfx.com/reel/index.html