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.

4

Could you please share the complete code with me?

If I want to embed different Vimeo mp4s into different CMS projects, how should I do it?

It seems that the current code only embeds a single Vimeo mp4, and that Vimeo mp4 applies to the same section across all my projects.

Secondly, is there a way to fix the issue where hovering over the Vimeo mp4 prevents me from scrolling the page?

5

Could you please share the complete code with me?

If I want to embed different Vimeo mp4s into different CMS projects, how should I do it?

It seems that the current code only embeds a single Vimeo mp4, and that Vimeo mp4 applies to the same section across all my projects.

Secondly, is there a way to fix the issue where hovering over the Vimeo mp4 prevents me from scrolling the page?

6

You could hire me to write it for you, but I am full with priority projects for the next few weeks.
I’d recommend you research examples online and possibly use a tool like ChatGPT to find a working solution.

No idea what your current code is but again, GPT or a dev can help you.

I’d have to see it and do some R&D.
If you’re using the Vimeo player, and that player IFRAME is consuming your scroll wheel(?) events, you might be able to do an overlay on top of the IFRAME to effectively clickjack your own site.

But research the problem, there may be well developed solutions that you can find on e.g. stackoverflow or a dev’s blog.