How to source a background video from the Webflow CMS
Would you like to use a dynamic background video on your site? Maybe even use it on your CMS collection page? I show you how this is done in just 8-9 steps! Let's get started...
Estimated reading time:
As you might have experienced before, you can easily place a standard background video on any page, but you can't simply source it from the Webflow CMS, as there is no "background video" field available for CMS collections. As I was working on a real estate client site recently I encountered this exact problem. The client wanted to use a background video for each of his property listing. All property listings were driven via the CMS and simply adding the regular background video element to a CMS collection page template would result in the same video being displayed on every listing. And that's not what you want!
So how did I solve this issue? To make it easier for you I am giving you step-by-step instructions on how to get a background video on the page via the CMS. Here we go:
Upload your video to Vimeo. As soon as you've done this, grab and note down the unique code for your video. You can find this by clicking the share button on your video.
Go into Webflow, open the appropriate CMS collection and add a new "plain text" field (you could call it Vimeo ID). You can make this field mandatory if you want to make sure there's a video being placed in every new blog post, property listing, or whatever your CMS collection might be about.
Go to your CMS collection page template and place a Collection List Element on the page
Connect your collection list with the appropriate CMS collection (the one you inserted the Vimeo ID field in)
Now select your collection list in the navigator, go over to the element settings and select "full width" as your layout of choice
In order to only show the video for your current collection item, you will need to go to filters in the element settings and click the little plus. In the drop down menu choose the name of your CMS collection (not one of your collection fields) and select "Collection Name" is current "Collection Name. This might sound a bit confusing, but check out the screenshot below to see how this is done.
Navigate to the actual collection item in your navigator and insert an Embed Element in your collection item and press the "open code editor" button in Webflow's element settings. You should now insert the following code snippet:
Select everything between video/ and ?background (highlighted here in bold) and delete it. In its place link to the Vimeo ID field in your CMS collection. You can do this by putting your cursor into the appropriate space in the code snippet and pressing the "Add field" button. Here you select the "Vimdeo ID" field.
That's it! If you've entered the correct Vimeo ID in your CMS collection, the video will now play on your collection page template. This way you can now have a different video playing in each of your collection items. You now only have to change your style settings so your video appears full width (if that's what you want). Alternatively you can also see (and clone) a sample project here: https://webflow.com/website/Webflow-Components
Hope this was helpful to you! In an upcoming blog post I show you how this technique can be used to enable another useful feature for real estate agents. In the meantime, don't hesitate to get in touch if you've got any questions.
Want to know how I got started and became a Webflow designer? Then, listen up! You'll find a brief rundown of how I got to where I am now, as I haven't only switched continents but also moved from print to web/digital design...
Are you based in Perth, Australia? Great - I've just established the city's first Webflow Meetup Group. Check out this post for all the details and for some more info on how to start a meetup group in your own hometown.
Ever heard of Matterport? The service allows you to place virtual walkthroughs on your client's website. This could be especially useful for real estate agents and tourism businesses. Let me show you how to easily integrate this feature into your next Webflow project.