Streaming live at 10am (PST)

How can you create a large Video library with CMS?

Hey y’all,

I’m trying to create a large video library for client that is moving their gym business online. They produce a few vimeo videos a day that their members are supposed to be able to access later on the website. I wanted to create a filtering mechanism so I put different collection lists into different tabs on a page in the members area. However, because the collection items are all pulling video links from vimeo it takes way too long for the page to load and it crashes on mobile.

My current work around is to create the illusion of tabs for a filter and sort by actually having different pages that load the different collection lists as opposed to having all the collection lists in the same tabs element.

Is there a better way to do this? Is there a better way to create a video library with a filter and sorting mechanism that involves hundreds of videos pulled from vimeo without making the page take forever to load?

Thanks!


Here is my public share link: LINK
(how to access public share link)

@sabanna. Hi! I’ve been digging into your Mixitup3 tutorials you put together. Do you think this would be a good application for this?

Some of the things my client wants their members to be able to do is sort classes based on different types, but also different instructors, and also allow members to search through the list for a specific title of class.

Here’s my read-only:

https://preview.webflow.com/preview/athletic-outcomes?utm_medium=preview_link&utm_source=designer&utm_content=athletic-outcomes&preview=994941f9418a40ed141ad770a5350396&pageId=5f036da866db703d5d444cda&itemId=5f0cab74ab0bf69928ba7aaa&mode=preview

Hi, @cevanert!

Yes, with MixitUp you can achieve all of that. You would need their multi-filter file.
Also, I would recommend using thumbnails instead of real videos on the “Virtual Classes” page, it will decrease the page load time. I don’t think that site visitors would start watching videos on that page anyways.

Agreed! And you’re right, they won’t use those videos. I just couldn’t figure out any code solutions to pull the thumbnail image from vimeo (I don’t know very much about custom coding yet).

I’m looking at their mult-filter extension. Seems complicated but I’ll have to see what I can do with it. Do you have other tutorials for the multifilter extension?

Thanks for your help!

I tried to explain it in my tutorial. http://mixitup-webflow-tutorial.webflow.io/multi-dimensional-filtering-for-cms-content

It seems complicated at the beginning, but when you “take it apart” it is pretty logical.

Do you know if there is a way to grab the thumbnails from a platform like Vimeo?

Awesome! Excited to try this out! Thank you :pray:

Unfortunately, I don’t have a ready “automated” solution, but I know there are some scripts exists.

When I mentioned thumbnails I meant that along with the video you could upload an image-thumbnail when creating a CMS item. Then on the page with all courses you would connect only images and not videos

Sure. I figured as much but wanted to save my client some time. Thanks again for all the help and for putting together those tutorials. Hopefully you won’t have to hear from me again about it :crossed_fingers:t2:

hi @sabanna I’ve built a dummy version of a filtering page for a website based off of your basic filter and sorting tutorial. However after publishing the site the container and elements disappear. Working with a devleoper friend on it. It seems like the javascript is working and calling upon the mixitup library but the individual elements are disappearing. Any idea why it’s not working? Is it something to do with webflow?

https://preview.webflow.com/preview/mixitup-practice-site?utm_medium=preview_link&utm_source=designer&utm_content=mixitup-practice-site&preview=99d5851ca305c401d3dfe288455bbcaf&mode=preview

@sabanna was able to get it to work! Just had to add some content to the different elements. Now I’m moving on to the multifilter. Thanks again!

https://preview.webflow.com/preview/mixitup-practice-site-6605361c8519ae1e3?utm_medium=preview_link&utm_source=designer&utm_content=mixitup-practice-site-6605361c8519ae1e3&preview=c75e2c70fa4a937aeed9d01f375faa1d&mode=preview

1 Like

Hi @sabanna I’m at a bit of a loss. I’ve set up the multifilter for my project and though it appears to be working, it’s not working correctly. www.athleticoutcomes.com/virtual-classes-mixitup-multifilter-build

You’ll see when you click and ‘instructor’ check box the Mixitup Mulitfilter tries to filter the content but then all of the tiles disappear. I’ve checked my class names, verified my code based on the tutorial but I can’t figure out what’s missing that’s causing the problem. Do you know why this might be happening?

Here’s the read-only:

https://preview.webflow.com/preview/athletic-outcomes?utm_medium=preview_link&utm_source=designer&utm_content=athletic-outcomes&preview=994941f9418a40ed141ad770a5350396&pageId=5f1ef3faec28b14dc12b78d3&mode=preview

Ok. So I realized that I had to change data attributes to data-value for the checkboxes which was causing my issue. But now the Multifilter does not filter based on elements matching two filters. Instead it includes everything attached to both filters.

So another way is that it appears to be ‘or’ logic between different filters. Not ‘and’ logic between different filters. How can I change that?