Loading state for embedded HTML

Hello all,

I have a bunch of Dropbox videos on my website and I’m using the Embed HTML widget to proper show them.
The problem is that sometimes the videos are too big and it takes a few seconds to load it properly. I was wondering if it’s possible to set a loading state only for this embedded HTML widget (I don’t want a full page loading state).

Any way of doing this without custom code?

Thanks

Hi @Rodhzz, welcome back! it’s been a while :smiley:

You can create a specific loading interaction to the big video files, that will show a rotating loader gif, for 1-2 sec. before hiding it and showing the embed widget. The down side of this is that it will show every time the page is loaded, regardless if the video is already cached or loaded by the user…

Hi @avivtech thanks for your reply.
How do I do this? And also, doing this I’m just faking the loading right? I’m not able to provide a real loader based on the real loading time of the video?

I saw this tutorial Build a custom preloader - Webflow interactions & animations tutorial - YouTube
But I guess this one is related to the whole page load, what I would like to do is to apply the loading just for one component.

I appreciate your help.

Thanks,
Rodolpho

Yea, it’s the same principle from this tutorial, applied to a specific DIV

@avivtech But then what would be the animation trigger? In this tutorial, they choose ‘When the page loads’. It should be the same? Am I able to select something like ’ When the element loads ’ ?

Thanks

You can’t have an ‘after element load’ trigger, so the solution is page load with some extra time to load the element…

Thanks. It worked!
I appreciate it

1 Like

There is a trick for this! Just embed an HTML widget as seen on ‘custom code embed’.

First set a different page with just the video and its loading screen as seen on Build a custom preloader. Then load said page as a custom code embed where you want it displayed.

Takes some effort but solves it i guess. (Haven’t tried it).