Background Video causes page load delay on mobile

Design help General
1

The background video can’t be switched off on mobile, and it takes ages to finish page load animation…

  • We can apply display:none on mobile, but the mp4 & webm download is still working on background.
  • On iOS, the page load interaction is not triggered until all the mp4 & webm data download is finished.
  • Then, the page load animation takes ages to finish…

Is there any ways to disable the video download on mobile?
I’d appreciate your advice!

Web_Inspector_—xPhone7—Safari—hctest_webflow_io—__
Web_Inspector_—xPhone7—Safari—hctest_webflow_io—__1054×695 157 KB

P.S.

Here is my site Read-Only: Webflow - Video Background & Loading Test

For the page load animation, I followed the official tutorial:

1 Like
2

Background videos should not beused on mobile, at all, their support is extremely weak and by definition it’s a usage that’s too heavy.

So you need not to use it.

  • Select the element that has a video background
  • duplicate it
  • select the first one
  • go to settings tab and disable it for anything but desktop
  • select the other
  • remove the video background on it
  • go to settings tab
  • disable it for desktop

Now you have two versions of the same element, one with video bg that only shows up for desktop, and the other without video that shows up for devices.

3

Hi Vincent,

Thanks for the reply. However, the solution above doesn’t work.

Actually, I’ve already tried it.
Webflow_-_Video_Background___Loading_Test

Disabling with the visibility setting tabs just make the video “display:none;”,
and then it still works on background…

dev_and_Video_Background___Loading_Test
dev_and_Video_Background___Loading_Test576×628 112 KB

4

Also, here’s the actual link: http://hctest.webflow.io/
If you open it with your iphone, it would takes ages to finish the preloader… ;(

1 Like
5

Maybe, the video background component should be like this, shouldn’t it…
https://stackoverflow.com/questions/28605591/prevent-html5-videos-from-downloading-the-files-on-mobile-videojs

6

Hey, did anyone make a solution on this? I know the discussion is referring to the video element usage within Webflow, but for a whole host of reasons that’s simply not practical…

So I have a

I then have the video HTML embed code (and container) set to no visibility from tablet down, and have a slideshow in its place. Which works fine — except for the video in the embed code is being DOWNLOADED to the device memory every time.

When I do an asset download test on mobile, despite the video link not being there (and it’s a simple embed, remember, not a video element in WF), there’s 20mb data and a load time anywhere from 15 to 37 seconds…!

This site is just about to go live (Hawaii time, I’m in Munich) and this is the last item preventing launch. Every time I review on my phone, I have a 10-20 second wait on the homepage for the slideshow, because it’s downloading the movie in the background…

Hoping someone can assist. The share link is below:

https://preview.webflow.com/preview/hawaii-video-memories?preview=cdc9175944a09d19202ade4b4a7301c5

Summary:
Homepage background video embed (HTML) works fine desktop, is turned off for tablet and mobile yet those are in fact downloading the full 20mb of the embed movie before showing the page.

Thank you,

Steve

1 Like
7

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.