I’m using Webflow to host my video content bank with over 1000+ videos and images. I display all of my content in one big collection list so that users can filter and search.
I want to give my users the ability to preview the videos before they download (right now they just see a screenshot of the video). I planned to add a modal to my CMS collection list featuring HTML code that pulls the video preview from Dropbox.
The problem is that adding the modal to my collection immediately crashes my Webflow designer + then my computer. Because I have so many products in one gallery, adding the code 1000+ times causes the site to overload.
Another website very similar to mine does this exact thing on Webflow, so I know it’s possible. If you click videos on this page, a modal appears with a video preview.
Webflow support offered this advice: “While I cannot confirm this definitively, it appears that the site you referenced employs filtering to display a limited number of items at once, thereby avoiding browser overload with excessive data.”
But I don’t have enough experience to know if this would be possible for me or how to go about it.
They didn’t build a modal, it just looks like one.
You’re looking at a separate page for each video, so only one is loaded at a time.
https://www.packsia.com/video/874166790
It is possible to build it on Webflow using an actual modal, and even live preview streams, I’d probably build it as;
Design your collection list and collection-item-driven modal
Use Finsweet Load and Finsweet filter
Possible custom code against the Finsweet Load API to lazy-load the video as items are rendered
Videos stored on a video hosting platform, I like Vimeo for this. Pro account to get the streams directly, this makes for seamless instant video playback.
Preview on hover, click to view the modal and see a full-size video play.
I didn’t reverse engineer their setup, but the solution I gave you above is how I’d build that in Webflow. If you host the videos externally and build your own player solution based on a <video> element, you can control the preloading and the designer isn’t overwhelmed with e.g. backgroundvideo elements.
In that arrangement, the modal has access to that video as well.
You might choose two different video feed/quality sizes, one for the preview, one for the mobile- Vimeo supports this automatically.