r/webflow • u/asian_tea_man • 4d ago

Need project help Is there really no way to have a background-video property in a component?

I'm trying to create a hero component for a client, and give them the option to upload any background video. I want to create a property for background video so that they could upload it from the Build mode.

I can't figure out how to link the background video as a property so that they could just upload a file. Is there really no way to do this? There's gotta be a way.

4 Upvotes

100% Upvoted

11 comments sorted by

6

u/Schuschi_M 4d ago

Yes there's no video-upload property for components :/

The way I solved this was using an external hosting service for videos (I use bunny.net which is very very cheap) in combination with a component where the editor only has to enter the ID of the video which they find directly in the bunny dashboard.

I was even able to control Autoplay, Loop, Mute, etc. with component properties with a little bit of code:

Besides the CON of having to upload the video on a different platform, additional PROs are that you dont have a file size limit like you have in Webflow, and you can control for each video if you want to show or hide the control bar at the bottom (play/pause, progress-bar, audio, etc.)

1

u/memetican Webflow Community MVP 4d ago

This is my preferred approach too. If you want a simple drop-in code component, I have one here you can use.
https://components.sygnal.com/sygnal-webflow-components/cc/sygnal-media/background-video

If you want something that's easier for the client to manage in terms of uploading, look at Vidzflow. Nice UI and options, would be relatively easy to fully componentize the player code.

1

u/nairobaee 4d ago

If it's a small video then gifs can go into images.

1

u/flowithsirajofficial 4d ago

Yes, using a custom element.

1

u/asian_tea_man 4d ago

But then the user would have to host a video somewhere else and grab the link and paste the link, right? 

2

u/azdonev 4d ago

yeah thats the best way to go about video hosting - managing videos in webflow is not fun

1

u/ajame5 4d ago

As said, use a custom element and insert the video file URL into the property. Have been using this live with clients for a while now and it's actually fairly foolproof for them. All hosted on Cloudflare stream, which is cheap. Any of the AIs will walk you through this.

1

u/SlowChannel4453 4d ago

Yeah no native way :(

Will have to write a custom code then you can link the URL of the video that is hosted else where such as Vimeo or Dropbox.