Vimeo Video Question

[FG1984]

I Have two questions about adding vimeo videos to a website.
1: Is there a way to embed a vimeo video and turn off all the controls to the video just plays and plays in the “Hero Section”?

2: Can you use the button element to play the vimeo video?

Any suggestions on how to to this would be a huge help.

[vincent (Vincent Bidaux)]

@FG1984

1: Is there a way to embed a vimeo video and turn off all the controls to the video just plays and plays in the “Hero Section”?

Go to vimeo and learn how to prepare an embed of the video. You’ll be able to chose UI elements, colors and options. Get the code and use a Webflow custom code widget instead of the video widget to embed it.

If it’s not enough, read further down.

@FG1984

2: Can you use the button element to play the vimeo video?

That, and also a more precise control of the video for your first question, can be achieved by code using the Vimeo API. But it is a coder work, not a designer work: it’s hard.

If you want your video to play full section in the hero section, in the background, rather use it as an html5 video (ie not on vimeo or YT)

[FG1984]

Thanks For your help. I’m not a programmer, so what would you suggest the easiest way to achieve a Hero Video Background that auto plays and auto loops would be? You said I could I could do html5 video, how or where would I upload that video to, to link to it?

Thanks again.

[vincent (Vincent Bidaux)]

@FG1984

so what would you suggest the easiest way to achieve a Hero Video Background that auto plays and auto loops would be?

Use HTML5 video. You can search the forum for it but you can start with one oof my post : Review of EasyHTML5Video generator app: it's very good! - Webflow Tips - Forum | Webflow

Now know about the downsides : it doesn’t work on mobile… on mobile it will show a play button under the overlay layer.

So the solution I use is I completely deactivate the video bg element for mobile and instead switch to an element sporting an animated GIF version of the video (shorter). It works great. You can see that in action here: http://www.1001pneus.com/

Hosting: You can use any server you can access with a FTP, or simpler, use Dropbox. A good practive is to create a /Cloud folder in your dropbox where you’ll put all the assets you need to access for your project. Then one subflder for each project for you to remember what to keep, what to clean. Then put your video and jpg (poster) files in it. Right click and “Copy sharing link”. Then, important, replace www.dropbox by dl.dropboxusercontent in the url you get from dropbox, and test each url in a browser to be sure it really points directly to each video file.

I hope this helps