Creating CMS-Powered Background Videos in Webflow using the Custom Element

Today, we're embarking on a digital odyssey to unlock the secrets of integrating CMS-powered background videos in your Webflow projects, leveraging the power of Custom Elements to give you native background  <video> without any custom code or embeds. 🎥✨ There’s also a handy cloneable at the end of the post for you to clone and a short video talking through it.

What's a Background Video Anyway?

We’ll long story short, it’s a silent looping, usually smallish video that autoplays, most of the time, behind something. Think of it as the unsung hero of web aesthetics, working tirelessly behind the scenes. Want a taste?

The important bits here are: autoplay, muted, and loop. The solution in Webflow is also usually really simple, add a background video element, upload a small video, you’re done, only, well, that doesn’t work on CMS pages or Collection Lists. What’s the solution, well usually you’d just do some custom embedded code, for either a  <video> or <iframe> (and we’ve covered that in another post here), but now that we have the new custom element in Webflow we can just build a video element using 2 custom elements (maybe more) for the video element and the src inside it.

But first, lets talk about iframe vs video.

Weighing Your Options

Choosing between a  <video> tag and an iframe comes down to your specific needs:

If you're looking for performance and direct control over your video content with better SEO prospects, go for the  <video> tag.
If ease of use, access to platform-specific features, and additional security are your priorities, an iframe might be the way to go.

Both approaches have their place in the web designer's toolkit, and the right choice depends on the balance of factors like control, performance, and functionality in your project. I’d say iframes load slower and when you’re using something like Vimeo as the source for the video the quality can suffer as you have no control over adaptive bitrates etc.

Enter the Custom Element: Webflow's Game Changer

Webflow's Custom Element feature is like finding a secret passage in a video game that leads you to hidden treasures. It allows us to create and manipulate HTML elements directly, giving life to ideas that were once confined to the realm of imagination. For a deep dive, check out Webflow University's guide. This little gem is our ticket to seamlessly integrating CMS-driven videos as background elements.

Crafting Your CMS-Powered Background Video

Step 1: Setup Your CMS Collection

Begin by setting up a CMS collection that holds your video files. Think of this as your video library where each book is a captivating tale waiting to be told. All you need are the download URLs from Vimeo. Just click video file links in Vimeo and switch to Download Links instead of the player links as these will expire. Typically you want to add three for each video, though one will work, high quality, medium and low, the browser is supposed to choose, so go easy on the high as a 4K video can jus kill the site’s performance.

Step 2: Harness the Power of Custom Elements

With the stage set, we'll use Custom Elements to create a native HTML5  <video> tag, dynamically linking our CMS items. Imagine conjuring a video player out of thin air, powered by the magic of Webflow and your CMS. With the setup I just described you’ll want 4 custom elements, the video, and inside 3 src elements.

The video element

Once you’ve set up the structure you’ll tag the 4 elements, with the outer one being video and the inner ones being source.

The video element

Here you can see we used attributes to apply loop=true, muted=true and playisinline=true, the rest is just gravy.

The source element

You’ll see we’re using attributes to bind the url to the src, that and the type are the most important.

The src attribute

Step 3: Style and Embed

Next, we'll style our video to fit perfectly as a background element, ensuring it complements your design without overpowering it. It's like dressing your video in its Sunday best. In the case of the clonable we created a 16:9 aspect box around the video, set the video to absolute and cover, so that it, well covers the aspect box no matter the size of the video. This bit is really up to whatever you were planning to achieve.

Grab the Cloneable

Because we're all about sharing the love (and saving you time), we've put together a cloneable Webflow project. It's like handing you the keys to the kingdom - just grab, clone, and customize to your heart's content.

There’s also a video to check out where I yammer through the clonable, but you can figure it out. Enjoy, drop a comment if you have questions, we’ll try and get to that, and there’s more on using custom code to do the same thing in this post.