CMS collection with interchangeable background videos?

Design help CMS
1

I’m trying to figure out if this is something that can be completed with Webflow.

Essentially my client is a marketing agency with many cases studies. Each has videos to display which would be shown in an iPhone mockup using background videos.

These iPhone style videos would need to be added to each case study CMS post. The problem is I’m trying to wrap my head around how I would create this in Webflow - mainly due to the fact that the videos themselves would be background videos - placed under the iPhone mockup.

The question is: can I create a system that allows me to have a case study template page in which the client will also be able to change out the background videos behind the iPhone mockups?

Any ideas are much appreciated here!

2

In webflow there is no way to add background videos in cms, unless you use a place to store your video file and use a custom embed to show this video.

<video autoplay loop muted style="width:100%; height: 100%; position:absolute; z-index: -1;">
 <source src="https://www.dropbox.com/s/xxx/xxx?raw=1&autoplay=1" type="video/mp4">
</video>
1 Like
3

Thank you Tim - I could definitely have the videos in a dropbox as you mentioned, I’m struggling a bit to figure out how I could integrate this into the CMS page template?

4

On a cms page template you’re able to put in fields in the embed, so you’re able to change the code above to something like below. You can add a field to your embed on the upper right it should say something like “+ Add Field” in purple.

A normal dropbox share link would look like this:
https://www.dropbox.com/s/xxx/xxx.mp4?dl=0

You or you client have to change that link a slight bit to make this work. The easiest way is to just delete everything after the last “xxx” so it woud look like this:
https://www.dropbox.com/s/xxx/xxx

Make them put in this link to the cms collection with a simple text field.

<video autoplay loop muted style="width:100%; height: 100%; position:absolute; z-index: -1;">
 <source src="[cms field]?raw=1&autoplay=1" type="video/mp4">
</video>
1 Like
5

Really appreciate that Tim - we’re going to try this out and see how it looks live! Will report back.

6

Hi @harrymolyneux , did you manage to get it work? I have not much programing knowledge so it would be great to have a step by step approach to this solution.

Thanks,