Webflow lacks an easy way to change the background video using props in a component. The only solution is to use videos from platforms like YouTube or Vimeo and copy/paste the video URL into a regular or custom video component.
I’ve created a solution where you can host videos on Webflow and use them as props in your components. It’s a manual process that requires some steps, but I believe it’s easy to follow once you understand the concept.
Sandbox: Webflow - Pedro's Video Gallery
You have two pages to check: the home page, where the video is showing, and the Video Gallery page, where you add the videos, the home page contains a component where you need to check the props and custom attributes, and the code embed
And here are the steps to follow
How to add new videos - Background videos
-
Navigate to the “Video Gallery” page.
-
Duplicate the “Video Component” by right-clicking it.
-
Right-click the duplicated component, then click "Unlink Instance.
-
Expand the duplicated section and select: “video-tag”
-
On the right, select “replace video” and upload the new video. Please note that videos must not exceed 30MB. Wait for the video to finish transcoding.
-
Publish the changes
-
To access the video you wish to use, navigate to the /video-gallery page . Once there, click the “Copy” button associated with your chosen video.
-
Navigate to the page containing the component where you want to use the video and access its settings. Find the “Video Code” setting and paste the code previously copied
-
The video will appear within the component.
Important: Avoid deleting videos from the “video gallery” page if they are currently in use.