Variable Background Video Property for Component

Hi!

I can’t seem to find anything online, but I’m currently making a site that needs a reusable component with a background video. I can’t seem to find a way to make the background video editable. Is there any solution to this?

Thanks!

You can use a custom element , or an HTML embed in your component, create the <video> element the way you want for your setup, and then populate the video URL from a component attribute.

Note you’ll probably want both an MP4 url property and an MOV url property. Webflow uses both in its background video setup to support a wider range of browsers.

You’d need to host the video files elsewhere, which is a best practice anyway since they have heavy bandwidth consumers.

Hey Michael, thanks for the reply.

I have a custom code embed with the video, it all works there. The only question is how do I create a component attribute to populate within the custom code to fill in the source?

Ah I forgot, property binding to embeds isn’t supported yet- I’d use custom elements for this for now.

If you’re trying to make the background video editable for different sections or pages, the best approach is to use a Collection List with CMS items, especially if you have multiple videos across various pages.