Embed Vimeo & Play on Hover

Design help Custom code
1

Hi friends

I’ve done a lot of the webflow tutorials and am starting to learn how other sites are built. There’s a feature the website weareversus dot tv that has an embeded vimeo link and then auto plays on hover. Scroll down to "featured projects and the 3 following videos all have this incredible feature. This code is also seen on their works page too.

I have looked for tutorials everywhere and I can’t seem to find anything that works for vimeo.

Anyone either know how to explain or break down how this code works? Or any tutorials that can show me the steps to get this final result?

Thank you everyone!

2

Hi there,

You can embed Vimeo videos in Webflow using the embed element. Here’s how to implement it with auto-play on hover:

  1. Go to the Add panel and drag an embed element onto your canvas
  2. Get your Vimeo embed code
  3. In the embed element settings, paste your Vimeo embed code
  4. To enable auto-play on hover, add these parameters to your Vimeo iframe URL:
    ?background=1&autoplay=1&loop=1&byline=0&title=0
  5. Add this custom code to your embed element:
    <script>
var player = document.querySelector('iframe');
player.muted = true;
</script>

The background parameter removes controls, while autoplay=1 enables auto-play functionality. Remember that most browsers require videos to be muted for auto-play to work.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

It shouldn’t be too difficult, you’ll need to read up on the vimeo player and how to control it from JS.

The rest is a mouseenter and a mouseleave event. Mouseenter starts the vdeo playback. Mouseleave stops and resets it to the beginning.

Separately, you can probably use Webflow interactions for the overlay if you want that.