Discover the best video-cms websites created by professional designers. Get inspired and start planning your perfect video-cms web design today!

I finally figured out how to get CMS video backgrounds that fill an entire container. 

Works with Webflow's own compressions as well (mp4 and webm).

I added Lazyload as well, so it only loads the video backgrounds on scroll.

Feel free to clone and ask questions in the comments.

CMS object fit video background

cms-object-fit-video-background

This project is built using Vimeo's API so we can create a nice video playlist that allows you to set a custom start point in the video when a user clicks on the play button. Even better, the videos are being pulled in via the Webflow CMS. 

This is great if you want a clean and fully custom video player for tutorials or anything like that. It does use custom Javascript, so you may want to poke around until you have a solid understanding of how everything works. This is probably not the simplest project for new Webflow users, but if you're feeling confident, then definitely go for it (it's not really that intense 😁).

Vimeo Custom Playlist

CMS Vimeo Playlist

Once the popup is open, scrolling of the entire page is disabled using custom code (body = overflow hidden). This helps longer content in the popup overlay to scroll more comfortably without accidentally scrolling the whole page. For the video popup, additional custom jQuery code is needed to stop the video from running in the background when the close button is clicked.

Tutorial: https://youtu.be/JbNtDkrfH0U

Custom Content and Video Popup / Modal

I've been working on a dynamic, horizontal scrolling portfolio for video content with project details. I have decided to share it with you lovely people! 

The project uses mousewheel.js and youtube embeds. It's also fully responsive!

Video Portfolio

CMS, Responsive, Horizontal Scrolling Video Portfolio

Showcase your Webflow projects in your portfolio with this beautiful component. Just record your screen and you can place the videos on this laptop mockup, a nice detail for your portfolio.
It's responsive and works with the CMS system so the videos changes dynamically.

CMS Porfolio Laptop with Video

Laptop with video component | Clonable

Hi my gorgeous friends of Webflow,

By playing a bit with jQuery and by using attributes to avoid the need for class matching, you can create a responsive CMS video player for your Webflow project.

Check for the instruction popup! 😊

Have an awesome Webflow journey y'all,
Francesco

P.S. Feel free to visit my YouTube channel:
https://www.youtube.com/@francescocastronuovo

Responsive CMS Video Player

In this Boost we take a look at how we can leverage code already written by Webflow engineers to make CMS Connected Background Videos possible. Normally, Webflow only allows us to link to YouTube or Vimeo videos within the CMS, but we can use a custom code embed to drop in our own HTML. We'll use Webflow to host the videos in this example, but you could host elsewhere like how I show in my videos on Dropbox and Amazon Web Services (AWS).

Webflow CMS Connected Background Video

CMS Connected Background Video

Memberstack

Launch ANY video streaming service with Webflow + Memberstack!

Host your videos through Vimeo & whitelist your domain to "secure" them.

Video Streaming Service Template

As we all know Webflow offers a Lightbox solution for CMS collections supporting multi-image fields as well as video-link fields. But the video-link field has a major API bug: Webflow won't show the video in the lightbox if you add the video-link via the API (e.g. from Airtable). This can be frustrating!

Well here ist a simple solution using the Webflow native lightbox without any external script to control the video.

Note: This solution is based on the sandbox project from samliew and the discussion in the Webflow Forum on this topic