Handling many videos on one page


#1

I develop course websites and on one new site a few of the pages are really sluggish at first as 12+ “calls” are sent out to fetch YouTube or Vimeo videos. The problem is increased because some of the videos are only 1-2 minutes long (I did not make them) but it seems each additional video, irrespective of time length, adds a new call to Vimeo or YouTube.

Once all the videos are loaded the page works just fine. But the videos are further down the page and at the very beginning a user might start scrolling and feel some resistance or drag.

Using the Foundry Video stack for all the videos.

Here’s an example page:
https://mathewusf.com/medialab2018/learn/1/

Here’s a second example, but this one uses a PageLoader stack. That seems to help a bit as it tells the user to “wait” a bit.
https://mathewusf.com/medialab2018/learn/2/

What would be ideal is some sort of video “lazy load” ability but I don’t see that available anywhere.

Does anyone have any other suggestions about how that initial experience of the user could be made smoother? Something better than a page loader icon?

The rest of the two sample pages are a simple design for right now and will be improved. Since these are supposed to be Sitelok protected pages I’ll need to re-lock them in a couple of days.

Any suggestions much appreciated!


#2

I ended up deciding to go with the Stacks4Stacks Page Loader stack. Seemed the cleanest indicator that folks need to wait a bit. Fast connection: very little to no wait. Moderate connection: about a 5 second wait.

I have password protected the pages again.


#3

I was watching this to see what solutions there might be.

I’d love to see something like Doobox’s Gif Player Stack. That thing is so slick for pages containing animations. iPhone live photo-turned gifs are really sexy but also really large.