Vimeo 嵌入 Squarespace：加载时隐藏控件，悬停时显示
Vimeo embed on Squarespace: hide controls on load, show on hover
这里是 Squarespace、Vimeo 和 iFrame 的新用户。我正在为一个 non-profit 做一些工作，他们要求我创建一个包含约 10 个视频的 "Testimonials" 页面，其中每个视频的控件仅在悬停时显示。
加载/非活动状态
视频加载时，不应有任何控件；分享；或 title/byline 可见。
悬停
悬停时，用户应该会看到播放器控件。
我试过的
给定基本的 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 server-side 的限制。 （它首先隐藏元素，然后在约 3 秒后呈现它们。）
- 我无法通过开发人员模式将自定义 Javascript 注入网站，因为我们只使用基本的 Squarespace，因此所有 JS 解决方案目前都被阻止。但是，我也许可以让他们付费升级 Squarespace，所以欢迎 JS 解决方案！
- 将
<script> 标签注入嵌入模式不会执行代码
我知道这在 Vimeo 开发方面是可行的，因为所需的事件在我开始播放视频时发生。暂停正在播放的视频后，控件会消失，然后在将鼠标移到视频上时重新出现。
我能找到的最接近的东西是使用 Frogaloop (https://forum.webflow.com/t/play-vimeo-video-on-hover-from-a-cms-collection/78458)。但是，鉴于 JavaScript 限制，我不知道如何在 Squarespace 中执行类似的操作。
信用
视频剧照仅供测试，因为我知道它是上传给拥有 Vimeo Plus 帐户的用户的。感谢 Bianca Giaever！ https://vimeo.com/58659769
我能够与 @VimeoStaff Twitter 帐户上的人们联系，他们为我提供了以下答案。 TL;DR：我尝试做的事情是不可能的，但有一些（次优的）解决方法。
As you've found, you can control settings individually (such as the
title and byline) within the Embed tab of your video settings page.
I'm afraid it's not possible to change anything mid-load in JS,
meaning you won't be able to load the player with no controls and then
activate them with a hover. We're so sorry for any inconvenience! I'll
be sure to extend this feedback to our product team.
It is possible to remove the playbar from your embedded videos. You
can enable this feature by adding the ?background=1 parameter to the
end of the player URL in your embed code, for example:
<iframe src="https://player.vimeo.com/video/76979871?background=1"
width="640" height="360" frameborder="0" allow="autoplay; fullscreen"
allowfullscreen></iframe>
Adding this parameter will have the following effect:
- All player toggles and elements will be turned off (including the play/pause button!)
- The video will automatically loop.
- The video will be set to autoplay
- The video will be muted
If you would simply like to hide the UI of the player without
muting/autoplaying/looping (i.e for a chromeless player), you can
alternatively add the controls=0 to the end of the player URL in your
embed code, for example:
<iframe src="https://player.vimeo.com/video/76979871?controls=0"
width="640" height="360" frameborder="0" allow="autoplay; fullscreen"
allowfullscreen></iframe>
When using the controls embed parameter, you'll need to either enable
autoplay (?autoplay=1), use keyboard shortcuts, or implement our
player SDK to start and control playback.
More information on background and chromeless videos can be found
here. Please note that keyboard shortcuts cannot be disabled
currently.
Additionally, I can see you've mentioned having multiple videos on one
page. If you have more than one video autoplaying on a particular
page, you will also need to include this parameter: autopause=0
这里是 Squarespace、Vimeo 和 iFrame 的新用户。我正在为一个 non-profit 做一些工作，他们要求我创建一个包含约 10 个视频的 "Testimonials" 页面，其中每个视频的控件仅在悬停时显示。
加载/非活动状态
视频加载时，不应有任何控件；分享；或 title/byline 可见。
悬停
悬停时，用户应该会看到播放器控件。
我试过的
给定基本的 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 server-side 的限制。 （它首先隐藏元素，然后在约 3 秒后呈现它们。） - 我无法通过开发人员模式将自定义 Javascript 注入网站，因为我们只使用基本的 Squarespace，因此所有 JS 解决方案目前都被阻止。但是，我也许可以让他们付费升级 Squarespace，所以欢迎 JS 解决方案！
- 将
<script>标签注入嵌入模式不会执行代码
我知道这在 Vimeo 开发方面是可行的，因为所需的事件在我开始播放视频时发生。暂停正在播放的视频后，控件会消失，然后在将鼠标移到视频上时重新出现。
我能找到的最接近的东西是使用 Frogaloop (https://forum.webflow.com/t/play-vimeo-video-on-hover-from-a-cms-collection/78458)。但是，鉴于 JavaScript 限制，我不知道如何在 Squarespace 中执行类似的操作。
信用
视频剧照仅供测试，因为我知道它是上传给拥有 Vimeo Plus 帐户的用户的。感谢 Bianca Giaever！ https://vimeo.com/58659769
我能够与 @VimeoStaff Twitter 帐户上的人们联系，他们为我提供了以下答案。 TL;DR：我尝试做的事情是不可能的，但有一些（次优的）解决方法。
As you've found, you can control settings individually (such as the title and byline) within the Embed tab of your video settings page.
I'm afraid it's not possible to change anything mid-load in JS, meaning you won't be able to load the player with no controls and then activate them with a hover. We're so sorry for any inconvenience! I'll be sure to extend this feedback to our product team.
It is possible to remove the playbar from your embedded videos. You can enable this feature by adding the ?background=1 parameter to the end of the player URL in your embed code, for example:
<iframe src="https://player.vimeo.com/video/76979871?background=1" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>Adding this parameter will have the following effect:
- All player toggles and elements will be turned off (including the play/pause button!)
- The video will automatically loop.
- The video will be set to autoplay
- The video will be muted
If you would simply like to hide the UI of the player without muting/autoplaying/looping (i.e for a chromeless player), you can alternatively add the controls=0 to the end of the player URL in your embed code, for example:
<iframe src="https://player.vimeo.com/video/76979871?controls=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>When using the controls embed parameter, you'll need to either enable autoplay (?autoplay=1), use keyboard shortcuts, or implement our player SDK to start and control playback.
More information on background and chromeless videos can be found here. Please note that keyboard shortcuts cannot be disabled currently.
Additionally, I can see you've mentioned having multiple videos on one page. If you have more than one video autoplaying on a particular page, you will also need to include this parameter: autopause=0