嵌入式 Vimeo 视频在移动设备上的位置不同

Question

我无法将嵌入的 Vimeo iframe 正确放置在移动设备上（在 iPhone 12 上测试）。由于某种原因，它部分隐藏在网站顶部的菜单下，而且很小，而在 iPad 和台式机上，它的外观和行为都很好。

可以在此处查看页面http://www.chaostheoryvfx.com/reel/index.html

这是代码：

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%;
}

我到处寻找修复方法，但似乎在网上找不到任何东西，所以希望这里有人可以提供帮助。

更新：

如果我在混沌理论的网络链接开头添加 www，Vimeo 视频在台式机和 iPad 上也会过大，但删除 www，这些设备上的嵌入式视频设置正确。有什么想法为什么会发生这种情况吗？

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

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

Answer 1

问题解决了。我删除了导致问题的包装