Streaming live at 10am (PST)

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

Thanks! This is great.

1 Like