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: vimeo-background-video - Webflow
Live view: http://vimeo-background-video.webflow.io/
Source of vimeo embed: Hintergrundvideos und „chromeless“ Videos einbetten – Hilfecenter
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…