Vimeo 嵌入 Squarespace：加载时隐藏控件，悬停时显示

Question

这里有新的 Squarespace、Vimeo 和 iFrame 用户。我正在为一家非营利组织做一些工作，他们要求我创建一个包含约 10 个视频的“推荐”页面，其中每个视频的控件仅在悬停时才会显示。

\n\n

加载/非活动状态

\n\n

当视频加载时，不应该有任何控件；分享；或标题/署名可见。

\n\n

\n\n

悬停时

\n\n

悬停时，用户应该看到播放器控件。

\n\n

\n\n

我尝试过的

\n\n

给定基本的 iFrame 嵌入代码：

\n\n

<iframe src="https://player.vimeo.com/video/58659769" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>\n

\n\n

\n
• \xe2\x9c\x85?title=0&byline=0&portrait=0删除了 Vimeo 帐户的标题、所有者姓名和所有者头像，无论付费状态如何。这是朝着正确方向迈出的一步！
\n
• ?controls=0摆脱了 Pro+ 视频的所有控件，这是所需的开始状态。但是，播放视频的唯一方法是通过autoplay=1： https: //developer.vimeo.com/player/sdk/embed。这不适用于页面上的多个视频。此外，我们没有付费 Vimeo 帐户。
\n
• { display: none; }页面加载后，在我的开发工具面板中使用 a 来定位元素。但是，我无法通过自定义 CSS 面板产生相同的效果 - 我怀疑是由于 Vimeo 服务器端限制。（它首先隐藏元素，然后在约 3 秒后渲染它们。）
\n
• 我无法通过开发者模式将自定义 Javascript 注入网站，因为我们只使用基本的 Squarespace，因此所有 JS 解决方案目前都被阻止。不过，我也许可以让他们付费升级 Squarespace，所以欢迎使用 JS 解决方案！
\n
• 将<script>标签注入嵌入模式不会执行代码
\n

\n\n

我知道这在 Vimeo 开发方面是可能的，因为当我开始播放视频时就会发生所需的事件。暂停正在播放的视频后，控件会消失，然后当鼠标在视频上移动时重新出现。

\n\n

我能找到的最接近的东西是使用 Frogaloop （https://forum.webflow.com/t/play-vimeo-video-on-hover-from-a-cms-collection/78458）。然而，考虑到 JavaScript 的限制，我不知道如何在 Squarespace 中执行类似的操作。

\n\n

信用

\n\n

视频剧照仅供测试，因为我知道它是上传给拥有 Vimeo Plus 帐户的用户的。感谢比安卡·贾埃弗！https://vimeo.com/58659769

\n

Answer 1

我能够与@VimeoStaff Twitter 帐户上的人们联系，他们为我提供了以下答案。TL;DR：我尝试做的事情是不可能的，但是有一些（次优的）解决方法。

正如您所发现的，您可以在视频设置页面的“嵌入”选项卡中单独控制设置（例如标题和署名）。

恐怕不可能在 JS 中更改任何中间加载的内容，这意味着您将无法加载没有控件的播放器，然后通过悬停激活它们。对于给您带来的任何不便，我们深表歉意！我一定会将此反馈传达给我们的产品团队。

可以从嵌入视频中删除播放栏。您可以通过将 ?background=1 参数添加到嵌入代码中播放器 URL 的末尾来启用此功能，例如：

<iframe src="https://player.vimeo.com/video/76979871?background=1"
width="640" height="360" frameborder="0" allow="autoplay; fullscreen"
allowfullscreen></iframe>

添加该参数会有如下效果：

• 所有播放器切换和元素都将被关闭（包括播放/暂停按钮！）
• 视频将自动循环播放。
• 视频将设置为自动播放
• 视频将被静音

如果您只是想隐藏播放器的用户界面而不静音/自动播放/循环（即对于无铬播放器），您也可以将controls=0 添加到嵌入代码中播放器 URL 的末尾，例如：

<iframe src="https://player.vimeo.com/video/76979871?controls=0"
width="640" height="360" frameborder="0" allow="autoplay; fullscreen"
allowfullscreen></iframe>

使用控件嵌入参数时，您需要启用自动播放 (?autoplay=1)、使用键盘快捷键或实现我们的播放器 SDK 来启动和控制播放。

有关背景和无边框视频的更多信息可以在此处找到。请注意，当前无法禁用键盘快捷键。

此外，我可以看到您提到在一个页面上有多个视频。如果特定页面上有多个视频自动播放，则还需要包含此参数：autopause=0