Delay in Video Scaling/Loading on Mobile

[MWPA]

Hi everyone,

I’ve set a background video in a row and configured it to be the height of the browser. On desktop, everything works perfectly. However, on mobile, there’s a brief moment where the video initially loads in its original aspect ratio before scaling to fit the browser height.

Is there a way to make the video load directly in its scaled version, set to the browser height, without the delay?

Thanks in advance!

[arminunruh]

i always need a link to where the problem is, please read this "when you post"

[MWPA]

My apologies, Armin! Here’s the link:

https://dev.rickangenent.nl/

Thanks again in advance!

[arminunruh]

hey i cant really confirm this

which phone and browser are u using?
which versions?

[MWPA]

iPhone 12, softwareversion: 15.6.1
Browser: Safari

[arminunruh]

can you post a screengrab / recording of the issue happening?
i cant reproduce it

[arminunruh]

for me the video loads and shows up without doing any resizing even for ios 15

[MWPA]

Hmm.. strange.

See here a screenshot:

It's just one second, but very annoying.

[MWPA]

Here’s another test with a smaller file size. The issue remains the same, so I don’t think file size is the problem.

https://dev.rickangenent.nl/videotest-1/

See screenshots:

[arminunruh]

can you try this css

video{
display: none;
}
video.loaded{
display: block;
}

i cant replicate the issue but maybe this css fixes it

Enter this css in "lay options" -> "custom css & html" -> "custom css"

[MWPA]

Thanks, Armin! I've added the code, but now the videos aren't loading at all—neither on desktop nor on mobile.

I also received a warning (see screenshot).

Even after following the recommendation, it still doesn't work.

[arminunruh]

video{
opacity: 0!important;
}
video.loaded{
opacity: 1!important;
}

and if you try this code above instead?

[MWPA]

No, unfortunately this doesn't work either. The screen just stays white – it seems like the video isn't loading at all.

[MWPA]

@arminunruh Would you mind thinking this through with me one more time?

On desktop, everything works perfectly. However, on mobile, there's a brief moment where the video initially loads in its original aspect ratio before it scales to fit the browser height.

I’m wondering if there’s a way to make the video load directly in its scaled version – set to the browser height – without that initial delay or shift.

Strangely, about 1 out of every 15 refreshes on my mobile, it does load just the way I want it to: a quick white flash, then the video appears perfectly scaled. That’s exactly the behavior I’d like to see by default.

Do you have any idea what might be causing this inconsistency? I'd really appreciate your help!

[MWPA]

I've made a screen recording and during testing it clearly shows what I described.

The second time I reload the page, you can see exactly the behavior I want: a quick white flash, then the video appears perfectly scaled.

But on the third reload, it malfunctions again.

Here’s my screen recording for reference.

I'd really appreciate your help Armin.

[arminunruh]

Hey, what is your iOS version? Seeing that your browser bar is at the top, it may be a year or two old. I'll have to check with this specific iOS version.

[arminunruh]

Can you go to Layer Options, then at the top click on the Lazy Loading section button?

If you have the latest Laytheme version, now there is a setting to enable or disable lazy loading for videos.

Can you disable it? This will probably do nothing but can be worth a try.

[MWPA]

Hi Armin, thanks!

I’m using an iPhone 12 with iOS version 15.6.1.

I checked the Lazy Loading settings under Layer Options, and video lazy loading was already disabled.

[MWPA]

What’s interesting is that I’ve seen the same behavior on newer devices as well – for example, on my wife’s iPhone, which she bought new in December. I’m not exactly sure which iOS version she’s on, but I’ll check that too. So I’m not convinced it’s strictly tied to an older iOS version.

Let me know if there's anything else I can test or try – happy to help troubleshoot further.

[arminunruh]

hey

i tested ios 15 and 14 but couldnt see this issue.
with the next lay theme update, go to lay options, other section,
and enable this:

this might help.

You could also try to remove the opacity of the row background. Meaning, put the opacity slider to its original position.
Maybe iOS has an issue with that CSS filter that is applied to the video.