CMS Video Background using Custom Code

Design help Custom code
1

Hi friends,

We are literally today kicking off with a project startup (products natural cosmetics etc), and we planned for a web to go live today.

We have filled in all the CMS data and created other collections for multi-referencing etc.

The issue is the latest minute realisation that we cannot add background videos (uploads) via CMS.

All in all, I am ready to create all of the CMS pages by hand, so that this will work, but I am sincerely hoping I will not have to.

Basically trying Video element with Video url from Vimeo and adding &autoplay=1 and ?autoplay=1 did not work. We were hoping it will autoplay the video and thus remove all the widgets that come form the embedded Vimeo work. Only to recognise that it will not remove the widgets, nor autoplay >:(

Is there ANY way to link a video url from anywhere, so that it dynamically pull each link depending on the page.

This is the example page / currently published with the Video element pulling the URL from CMS:
http://bionega.webflow.io/linija-kozmetike/eso

Thank you so much in advance.!

2 Likes
2

You actually can.

But you’re going to do it with custom code instead of the Webflow widget.

  1. make your first set of HTML5 video compliant video (various formats, mp4, ogg etc) and host them (on dropbox for example). Name them EXACTLY the same for later convenience, and write down their filename.
  2. craft your HTML5 video code with placeholder paths and filenames (such as “/path/video.mp4”, “/path/video.ogg”
  3. paste your code into a custom code widget
  4. put the custom code widget inside a dynamic list or in a CMS template page (if you don’t the following won’t work)
  5. back to your CMS collection settings, add a text field and name it: “Path and filename of HTML5 video”
  6. now fill your collection with the html5 video data. ONLY the complete path from http:// until the end of the filename WITHOUT extension, so something like “http://thepath.com/folder/filenameofhtevideo” No .mp4 or anything.
  7. back to the custom code widget that is inside a dynamic list or template page, select the path and filename of the first video version (mp4 probably) WITHOUT selecting the extension and click the link/icon at the top right of the custom code window.
  8. select the text field you’ve created
  9. repeat steps 7 and 8 for every video version and poster version

Now Webflow CMS is making a video bg based on what you’re feeding the collection with. You have to produce the various video formats and host them, however.

Note: you can find ways to craft video bg with youtube links, so it could be even easier than my method as you’d have to replace only one string in your code by CMS data.

We won’t let you create 10+ static pages :wink:

Note 2 : you have to learn to:

  • compress a video for HTML5 formats
  • write HTML5 bg video code
  • host a file on dropbox
    All of which you can learn by searching on this forum, or on Google, easily.
4 Likes
3

Thank you

Thank you

Thank you!

Ran it all perfectly!
Familiar with all the other things, but this was bugging me hardcore!
Did not realise there was custom field text working in such a manner vis a vis CMS.

THANK YOU!

You have many pints of beer from me!

4

Yep, the option to link only appears when your custom code widget is inside a dynamic container, and is pretty discreet…

But that’s the door opened to e-commerce and many other things… a tiny link for such a big door :slight_smile:

Glad it helped :smiley:

7

Hi 5 years odd later, I’m having quite a bit of difficulties with this. I’ve uploaded my videos to my dropbox, and gave them simple names… what next? I don’t know anything about HTML and i think i have the right code to use. So what sort of placeholder paths would i need? I’m getting very confused :frowning: