"PageLoader" and "Layer Background / Video" of "Sections Pro"

[Gianluca]

Hi everyone,
I have a problem that occurs with “PageLoader” and “Layer Background / Video” of “Sections Pro”.
In practice, in case I want to obscure the page for loading (Hide Page Until Loader) by inserting the # blankstrap-content element, the loading takes place, the video starts, but it gets smaller at the top left of the layer.
If I remove “Hide Page Until Loader” the loading takes place regularly and the video is positioned perfectly (https://polliallabrace.info).

Any suggestions? Thank you.

Image with (Hide Page Until Loader) inserting the element # blankstrap-content (the video has a background image)…

Image with (Hide Page Until Loader) by inserting the # blankstrap-content element (the video does not have a background image)…

Without Hide Page Until Loader (unchecking), the “PageLoader” and “Layer Background / Video” of “Sections Pro” work perfectly and the video is positioned correctly: https://polliallabrace.info

Grazie.

[tav]

@Gianluca

PageLoader

Hi @Gianluca, What is the PaegeLoader that you are referring to? Where is the Hide Page Until Loader setting?

Could you give a url of a test page showing it when the problem occurs with the other stack / setting that you are referring to please.

[Gianluca]

Thanks for your help,
now I create a page to show the problem (in the end it’s not a big problem, but it was only to understand if it could be solved).

Pageloader is this stack: https://stacks4stacks.com/pageloader/index.php

this is the page where Hide Page Until Loader (unchecking) and the video is positioned correctly: https://polliallabrace.info/

this is the test page where the problem occurs: https://polliallabrace.info/test/
where Hide Page Until Loader is set to #blankstrap-content

Grazie per l’aiuto.
Thanks for your help.

[tav]

Thanks - I now see the problem.

The loader just does a display : none on all the page content until it is loaded.

This means that the page content has zero size. The video scaling relies on filling its container. If the container is zero size then no scaling can occur.

The best solution for the loader would be to use a combination of CSS visibility, opacity and z-index to hide and then fade in when appropriate. Simply using a jQuery fadeIn() on all the page content will break anything that relies on calculating a size or being present on page load - cover scaled videos included.

I’m afraid there is nothing that stacks on the page (such as the video) can do about this.

I would however question a couple of things about using this.

Firstly, I personally prefer to see the page load even if I have to wait for the video. In my opinion that is a better user experience than a blank screen with a counter.

Secondly, it seems to be forcing a very long delay - if I download the video separately it takes just 229 ms to load whereas I have to wait for 9 seconds for the loader to count up - why is this extra delay present? I don’t really understand its function.

If you do want a loader, I would strongly suggest using one that fades in the page content as soon as loading is complete rather than waiting for an arbitrary time just to delay things unnecessarily.

[Gianluca]

Thanks for your help,
I found your post from August 2019, where you put a loader-serction-svg.zip.
I used your example, I inserted a gif instead of the svg because svg rotated only at the end of the upload, and I really like the result (although I would have liked to show the percentage loaded 0 … 100% of the preload).

Thanks again for the help and the preload file you uploaded.

The result of the preload to upload the video is on the home page: https://polliallabrace.info

Thanks Andrew, you are the best.

[Gianluca]

soluzione: Page preloader with content of own choice?

[tav]

I think that is a much better solution as it is only shown for the time needed to load the page rather than an arbitrary timed delay.

[Gianluca]

Thanks again