Vimeo overlay, iframe autopause

Design help General
1

Hi!

I have this probably sort of advanced problem, I want to make a DIV overlay to a vimeo embed and I sort of works, it’s just that I want all players to pause when you click a new video.

I googled it and it seems like a lot of people are having similar problems, but they are mostly not related to webflow.

Any ideas?

The custom embed code looks like this now:

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

and the custom backend code is a mess (but sorta does the job) to and looks like this:

Here is my site Read-Only: Webflow - Victor's Supercool Project

2

Anytime you want to work with Vimeo embeds in a custom way, you need to use the Vimeo player API and Webflow embed elements, so custom code. Not the native “Embed.ly” vimeo embed widget.

3

Add screenshot. Hard to understand your issue.
Also add related stackoverflow / codepen.

4

It might be easier to understand if you look at this example: http://www.maceofrost.com . I want to accomplish this effect in Webflow with Vimeo embed, with as little extra code as possible. I’ve looked at the Maceo site and it’s custom from top to bottom and alot of js at work. Preferable I want to keep the site i’m working on within the Webflow ecosystem/cms.

I’ve tried to mimic the effect with Webflow transitions and animations but there is allways something/everything that breaks, in all kinds of ways.

Is this a no-go or do you guys think it’s doable without a trillion lines of code?

5

In general this is the The shortest solution you’ll find (Less than 30 lines of code - based on VIEMO API).

How to move this idea to webflow? this is another issue (You should know a little JS - or hire freelancer. Me or any other dev):

The overlay hover effect not related to JS (show/hide any elements you want with/without animation).

chrome block auto play videos with sound - this line solve this issue:

    player.setVolume("0");