CMS Connected Video Background DIV

Hey there -

Curious if there is a way to use the “video background” div block with CMS items. Looking for a solution to uploading videos to CMS items and calling on them dynamically in a template.


For such cases I use the following vimeo backgound video snipped as embed (position=absolute > full)

<iframe src="" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

and replace the video-id (number in den source-url by a reference to a CMS text item. Replace width and height with 100%. Past it into a CMS Collection and set the collection item to relative. Add a padding-bottom=56.25% to the collection item to to get it fullscreen (with a 16:9 aspect-ratio) and set the whole Collection List Wrapper to z-index -10 (throw it into the background).

Then upload your background video to vimeo and paste the video-id into the CMS text field. Thats it.

I’ve made a clonable project you can use if you like:
Live view:

Source of vimeo embed:


Thanks! This is great.

1 Like

For the video to autoplay and loop is it necessary to have a paid account with vimeo? I have the free account and have done this and the video shows up fine but it wont autoplay or loop. Thanks

1 Like

I have the same issue. So, I think this solution only works with a paid Vimeo account.

How do I get rid of the controls? This has to be done in the vimeo settings? So not a free solution? How frustrating to be paying for hosting and you can’t even upload background videos to your own host…