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.

Thanks!

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

<iframe src="https://player.vimeo.com/video/76979871?background=1" 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: https://webflow.com/website/vimeo-background-video
Live view: http://vimeo-background-video.webflow.io/

Source of vimeo embed: https://vimeo.zendesk.com/hc/de/articles/115011183028-Einbetten-von-Hintergrundvideos-und-Videos-ohne-Chrome

2 Likes

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…