Streaming live at 10am (PST)

Play Vimeo Video in Overlay via click on button

#1

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

0 Likes

#2

Add live URL - no way to answer like this.

0 Likes

#3

@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

0 Likes

#4

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

0 Likes

#5

@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.

0 Likes

#6

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/

0 Likes

#7

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

0 Likes

#8

@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.

0 Likes

#9

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).

0 Likes

#10

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

0 Likes

#11

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

0 Likes

#12

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.

0 Likes

#13

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

0 Likes

#14

@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.

0 Likes