Streaming live at 10am (PST)

Play Vimeo Video in Overlay via click on button

Dear community

I wanna build a video lightbox (custom) not with the webflow lightbox and wanna start in there a Vimeo video on click on a button which is outside of this lightbox.

Like on the Webflow eCommerce header, but for some reason its not auto playing after clicking on the button anymore since a few days.

Does anyone of you have done something like that which is still working?

Best,
Cédric

Add live URL - no way to answer like this.

@Siton_Systems Hi, thanks for your answer.
Actually I just wanna build something like on strv.com. but with Vimeo. isnt that possible? There its done with a custom player I guess.

I have no live URL yet

In the past i made some codepens for this issue (Very usefull trick/idea).

1. Video.JS - autoplay + sound

Her I have an example of embed video (Remodal + Video js) and modal (Works fine/smooth). Less than 5 min to move this codepen to webflow (If you want i create for you step by step example)

https://codepen.io/ezra_siton/full/bjqwjL

2. youtube example - autoplay + mute

Clever code with youtube API - but no way to autoplay (Only work when mute: 1,) - There is no way around this (Google it)

https://codepen.io/ezra_siton/pen/WgyxKM?editors=1010

@Siton_Systems so with the 1. Video.JS - autoplay + sound example, its also working without mute on Chrome right? Disadventage is as I can see, its complete custom code with no elements from Webflow but the custom code module.

I test on chrome mobile/web - works fine (Try it yourself - this is the idea of codepen :slight_smile: )

The button could be by webflow. The video and modal by embed code - and the assets “before body/head”. When you close the modal the video also stop.

The only disadvantage is - no way to host large videos on webflow. No other disadvantages (You use this video one time under Hero X - so the custom code her is not such big issue).

One more disadvantage - on youtube its easier to change Quality (For slow connection internet). But also her you find solutions like this one:
https://kmoskwiak.github.io/videojs-resolution-switcher/

@Siton_Systems Thanks, I guess I will need to try it out though :wink:

@Siton_Systems The thing is that I have lots of background videos selfhosted on that page.
Isnt there a way to have it in Vimeo or YouTube but not muted after clicking play and the popup opens and the video starts playing?
I just dont want the users clicking twice for one action.

Sorry, i don’t know a way. Google developers also think about a lot of site-builders tricks (Start on volume 0 and on click up the volume to 100) and ideas like this (It’s hard to get around - because this is browser core - behavior).

Also the trick of “on click on button X” also “click on youtube play” by js wont work for me.

For example - this code (Not mine) wont work. Only if you click one time “play” the custom play will start to work.
https://codepen.io/chriscoyier/pen/zawHg

But maybe try on stackoverflow (The answers change over time).

Okay will need to look for an answer somewhere else, but thank you for your effert in helping me out :slight_smile:

@Siton_Systems just solved it with a youtube embed with this code here https://codepen.io/AmrSubZero/pen/oLOYrA

Not working for me. Again only if you click first time manually on YouTube “play” - and than on the custom “play” button - the auto-play button will work.

Hi, could you share how you solved the video player problem? I was looking into this problem also. thanks!

@zhadrock I just used the code from here https://codepen.io/AmrSubZero/pen/oLOYrA and rebuilt it in webflow. And It worked.

I am currently looking into how I can get it to work with Plyr.io on top of it. Cant figure it out atm.