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.


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