Video Background CMS and Lightbox/modal

Hi guys!

Im a videographer/filmmaker trying to make a videoportfolio.

I have some newbie questions (sorry guys)

What im trying to make is to show some video backgrounds divided in sections. Each video will be post as CMS with this info: A very short clip video (6secons max) to work as a background video. The Original video (i asume will be vimeo, or dropbox), poster image, title, description, and type (commercial, corporate, ad, etc).

I started to build the site and I found my self with some questions!

  1. Background Video: There is any chance I can associate a background video with CMS? (I only can put video links to vimeo, etc, I tried the amazon link but did´t work)
  2. Is Background Video faster than using Dropbox, vimeo?
  3. When clicking de “video word”, you get a Lightbox with the video. But i want to add some custom text (under the video). Should be possible to create one custom modal with dinamyc content?
  4. When Lightbox is on, all the other background videos are still playing, should I pause them? or it doesnt affects the web performance if I put opacity 100%?
  5. I found some webflow projects with custom code to disable scrolling when modal/lightbox is on but i couldnt make it work, any tips? advice?

https://preview.webflow.com/preview/matiascollado?utm_medium=preview_link&utm_source=dashboard&utm_content=matiascollado&preview=f6d4a8246c6f77729e2d5c3a927f3d09&mode=preview

http://matiascollado.webflow.io

Thanks guys!!!

1 Like

Hi @MatiasCollado - Welcome to the forums.

Quick suggestion: When seeking information in the forums, try to limit your scope to one or two closely related questions at a time. That way people can chime in, and don’t have to try to answer everything at once. It also makes it easier to stay on topic. Also, you have a better chance of finding an answer, amongst the content already created, via a quick search.

That being said I will give it a go! :slight_smile:

Not without using custom code to create the element and bind it to a “src” value in a field in your collection.

A background video in Webflow is limited in size (30 MB) and is downloaded by the browser straight from the src path. It is not streamed. It loops as long as the visitor is on the page unless you or they stop it. Vimeo streams videos meaning you don’t need to wait for the video to completely download to see it. Dropbox does provide streams with durations based on the owner’s plan. Browsers can handle video differently. However, the short answer is no.

You could create a custom modal and place a player on it, surrounded by whatever you wish. This could be done on a collection item as well. If you need to customize the player, then you need to work with the API provided by the host and use custom code to work with it.

Anytime a video is playing; it is using a visitors system and network resources. It is always best to stop playback when a video is not “active,” of course, some people “watch video” to stream audio. Look at the behavior of video-rich sites to get an idea of best practices. You can also find out more at Vimeo’s developer pages and Youtube’s.

I would suggest creating a new topic, sharing your read-only project and all the details you can to get specific. There could be many reasons why you are having an issue.

This document over at the Google Developers website can help answer any questions you might have about video and the web. The <video> and <source> tags  |  Articles  |  web.dev

Hope this helps you proceed and succeed. Welcome to Webflow.

Hi Matias
I saw you got this working on your site and was wondering if you could tell me how you did it as I’m struggling to do the same thing on my website.
Thanks
Adrian

Hi adrian, sure, where are you struggling?

With all of it. I was hoping to play the first few seconds of my films that are hosted on vimeo. Is that possible or did you make a short 3-6sec film and upload this completely separately from the main film? I am currently using cms to populate all my pages. When I bring a background video into a page with my commercial films, 9 in total, the same background video is fed across all those films which obviously doesn’t work. It’s not like bringing in a photo that look in each cms page and brings in that data automatically. So if you can share how to built that side of things it would be very very appreciated. Thanks

please, can you share your read-only link?

https://preview.webflow.com/preview/adrianwolfson2021?utm_medium=preview_link&utm_source=dashboard&utm_content=adrianwolfson2021&preview=b65ff7399680dda8750d920f165891ea&workflow=preview

I’ve not added background video yet as I can’t get it working. At the moment it taking a still from the cms.

1- To play the first few seconds, you have to create a new video and host it somewhere, TIP: You can upload it as webflow background video, and then copy the URL.

2- All the data in the CMS, I manage it with plain text, because then its easier to work with it when you have to use embed code.

3- All my background videos are embed codes, i will share for you:

1 Like

https://preview.webflow.com/preview/matiascollado?utm_medium=preview_link&utm_source=designer&utm_content=matiascollado&preview=aac4da3e1fdbe2301e519e0b932dacf7&workflow=preview

1 Like

i see your using cloudinary for hosting so i was setting up an account with them and wasn’t sure what to pick when setting up for these choices. What did you pick? iOS, JAVA, jQuery, PHP, Wordpress, other. Or does it not matter? Thanks for all your help

@adrianwolfson - This is a helper function only, does not change the Cloudinary interface / functions. JQuery is already loaded on Webflow so that might be of interest to you.