vimeo embedded in element grid - slow on mobile and scroll issue

[Nzagamba]

I embed quite a few videos in my Element Grids. I use the laytheme function to add the vimeo videos.
The vimeo videos are set to autoplay, muted, and loop.
Here is my page
There are a few issues I face:

Desktop:

• First video somehow loads very very slow, the videos further down work great, why is the first video not playing directly? It shows a black video for a long time, before playing.
• scroll issue: when scrolling down over a video, somehow scrolling blocks and slows down. Why? Can I turn this off?

Mobile:

• Videos on mobile don't load, or load very slowly, why is this?

Is there any way, I can improve these bugs?

[Nzagamba]

I just tried to play with the caching settings, and found out the following:

In Lay Options I ticked:

✅ Enable Layout Cache

-> makes first video loading very slowly, rest of the videos loads correctly.
-> my beautifully customized filter menu on desktop with js features breaks, when this is active.

✅ Disable Ajax / Compatibility Mode

-> makes first video not load at all, rest of the videos loads correctly
-> my beautifully customized filter menu works now.

I'm wondering now, If my site gets slower, if I don't activate caching? Should I then use a caching plugin like WP fastest cache? I can't tell if the site is faster using WP fastest cache...

and how do I get my first video to load?

PS:
scroll issue is solved after deactivating ❏ smooth scrolling

[arminunruh]

hey!

every time you embed a vimeo video, it creates an iframe, basically a website in your website.
thats just how vimeo embeds work, it has nothing to do with lay theme.

thats pretty slow

its ok if you have one vimeo video, but if you have many on one page, it gets too slow

thats not because of lay theme, its just that if you embed a vimeo iframe, the iframe itself loads a lot of js, css many html elements

if u have vimeo pro, you can get the vimeo streaming or download urls.
they look sth like that:
https://player.vimeo.com/progressive_redirect/playback/428023635/rendition/720p/file.mp4?loc=external&oauth2_token_id=1801537914&signature=c4c116e1e4c56de82bab48df8548deb2bfbaa21a1827856dd3fb3a3fe033668f

you can use those with +video -> +.mp4 video (check use external url)

this will load the video file directly instead of a iframe embed, thats faster
but it wont have the same vimeo UI

you cant really make it faster than it is already

if you have very short clips it may be faster to just use them as .mp4 video elements.

• video -> + .mp4 video
  in the gridder

I'm wondering now, If my site gets slower, if I don't activate caching?

probably yea

Should I then use a caching plugin like WP fastest cache? I can't tell if the site is faster using WP fastest cache...

i think lay themes caching is probably faster

caching this wont cache the vimeo embeds though this wont make a difference for loading the vimeo videos. there are no caching plugins that will do that
cause a vimeo embed is a website that is loaded inside your website