How to source a background video from the Webflow CMS
3 minutes
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.
Add a plain text field to your CMS collection and insert the Vimeo ID
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.
Set your CMS collection filter to only show data of your current CMS item
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:
Use Webflow's code editor to insert your code snippet and link it to the plain text field you created earlier
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.
Wait, before you go - if you're a freelance Designer or running your own little agency, you might be looking for a great tool to send proposals, invoices and more. I use Hello Bonsai for this and you can take a look at their website and give it a spin yourself (affiliate link). If you want to read more about it first, I have written a helpful article about it here: "How I use invoicing and proposal tool Hello Bonsai as a Webflow Designer".
