Lazy load videos using scrolltrigger

[andrewandopen]

Hey there,

I'm working on a site that has multiple videos on my homepage. I'm trying to improve it's performance by only loading videos that sit below the fold when they come into view. I'm trying to use scrolltrigger for this. I've been referencing this post, however it seems extremely complicated and is relevant to images as opposed to videos. 

Does anyone have any simple solution here?

Thanks in advance

[Rodrigo]

Hi,

 

Ryan (@elegantseagulls) already provided a good approach in that particular thread:

Using the isInViewport method with the top of the element, should return the percentage of the viewport(on a 0 to 1 value) that the top of the element is from the top of the viewport. So for example 1.1 means 110%. In a screen with 1080px height that is 1188px from the top of the viewport or 108px below the fold. So that would be a good point to load your videos.

 

If you keep having issues, please include a minimal demo in order to get a better idea of what the problem could be.

 

Happy Tweening!