为什么这个嵌入 Youtube <iframe> 的视频背景不能在 Safari 或 Chrome Mobile 中播放？

Question

我有这个 Youtube 视频作为我网站的背景。它在 Opera、Brave、桌面 Chrome 等中完全按照预期工作。但我有两个问题：

1. 视频不会在 iOS 上的 Safari 或 Chrome 中自动播放，并且 Youtube 播放按钮在视频中间仍然可见（尚未在 Android 上测试）。
2. 有时当我在我的实际网络域而不是实时服务器上查看视频时，第一次访问该页面时视频不会加载。然后它会在刷新后工作。

这是我视频页面正文中的 div：

        <div class="video-container">
            <iframe src="https://www.youtube.com/embed/tSbwuwQqO3A?controls=0&autoplay=1&mute=1&playsinline=1&playlist=tSbwuwQqO3A&loop=1"></iframe>
        </div>

这是 CSS :

.video-container {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -99;
}

iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

我尝试使用 HTML 视频标签将视频本地托管在项目文件夹中，并将源设置为 .mp4 文件。我尝试将自动播放、循环、静音、在线播放和允许全屏放在标签内，但视频不会像 Youtube 嵌入那样全屏显示，这是我需要的方式。