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

Question

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

加载/非活动状态

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

悬停时

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

我尝试过的

给定基本的 iFrame 嵌入代码：

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

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

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

我能找到的最接近的方法是使用 Frogaloop (https://forum.webflow.com/t/play-vimeo-video-on-hover-from-a-cms-collection/78458)。但是，鉴于 JavaScript 的限制，我不知道如何在 Squarespace 中执行类似的操作。

信用

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

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>

添加该参数会产生如下效果：

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

如果您只是想隐藏播放器的 UI 而无需 静音/自动播放/循环播放（即对于无铬播放器），您可以 或者将 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