嵌入式 Vimeo (iframe) 全屏无法在 Chrome 中工作

Question

我正在尝试将 vimeo 视频嵌入为 iframe。我正在使用以下代码：

<iframe width="1140" height="570" src="https://player.vimeo.com/video/553469759?autoplay=1&dnt=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

当我将其粘贴到 codepen 或在 firefox 中尝试时，它工作得很好。但它对我来说在 Chrome 中不起作用。当我检查 iframe 的 HTML 时，我可以看到 vimeo 添加了一个类no-fullscreen-support，但它还添加了这些类：

• js-player-fullscreen
• with-fullscreen

Answer 1

我自己想出来了。这是由于 Nginx 在标头中设置了 Permissions-Policy。在我的 Nginx 实例中，最初设置为：

add_header Permissions-Policy "geolocation=(),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),fullscreen=(self),payment=()";

这种情况的罪魁祸首是fullscreen=(self)——它告诉 Chrome 除非代码源自该网站，否则它不应该允许全屏。由于 Vimeo 的 iframe 是从 player.vimeo.com 加载的，Chrome 会将其视为第三方，因此不允许这样做。从权限策略中删除它，使其看起来像这样：

add_header Permissions-Policy "geolocation=(),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),payment=()";

解决了问题。该按钮现在显示正常。

对于那些使用 Apache 的人来说，它可能看起来像这样：

Header always set Permissions-Policy "geolocation=(),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),fullscreen=(self),payment=()"

同样的原则也适用，只需删除fullscreen=(self).

您可能还会看到它被称为“功能策略”，同样的事情，它现在被称为“权限策略”。

您可以在此处了解有关权限策略的更多信息： https: //github.com/w3c/webappsec-permissions-policy/blob/main/permissions-policy-explainer.md