Search code examples
iframevimeosquarespacevimeo-player

Vimeo embed on Squarespace: hide controls on load, show on hover

New Squarespace, Vimeo, and iFrame user here. I'm doing some work for a non-profit, and they've asked me to create a "Testimonials" page with ~10 videos where the controls of each are revealed only on hover.

On load / inactive state

When the video loads, there shouldn't be any controls; sharing; or title/byline visible.

on load

On hover

On hover, the user should see the player controls.

on hover

What I've tried

Given the basic iFrame embed code:

<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 gets rid of the title, owner name, and owner avatar of Vimeo accounts, regardless of paid status. This is a step in the right direction!
  • 🛑?controls=0 gets rid of all controls for Pro+ videos, which is the desired start state. However, the only way to then play the videos is via autoplay=1: https://developer.vimeo.com/player/sdk/embed. This wouldn't work with multiple videos on the page. Also, we don't have a paid Vimeo account.
  • 🛑Targeting the elements with a { display: none; } works when in my Dev Tools Panel after page load. However, I can't produce the same effect via the Custom CSS panel -- I suspect due to Vimeo server-side restrictions. (It hides the elements at first, then renders them after ~3 seconds.)
  • 🛑I can't inject custom Javascript into the site via Developer Mode because we're only using the basic Squarespace, so all JS solutions are currently blocked. However, I may be able to get them to pay to upgrade Squarespace, so JS solutions are welcome!
  • 🛑Injecting <script> tags into the embed modal doesn't execute the code

I know this would be possible from the Vimeo development side because the desired event happens when I've started to play the video. After pausing a video that has been playing, the controls disappear, and then reappear on mouse movement over the video.

The closest thing I could find was using Frogaloop (https://forum.webflow.com/t/play-vimeo-video-on-hover-from-a-cms-collection/78458). However, given JavaScript restrictions, I don't know how to execute something similar in Squarespace.

Credit

The video stills are just for testing, given that I know that it is uploaded to a user with a Vimeo Plus account. Thanks to Bianca Giaever! https://vimeo.com/58659769

Solution

  • I was able to connect with the folks on the @VimeoStaff Twitter account, who provided me with the following answer. TL;DR: what I'm attempting to do isn't possible, but there are some (suboptimal) workarounds.

    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