google-chrome - 嵌入式 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 在 header 中设置了 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 将其视为第三方并且不允许这样做。从 Permissions-Policy 中删除它，使其看起来像这样:

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

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

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

Header 始终设置 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