Page Load Interaction and Background Video Component conflict on iOS Safari

The Background Video Component conflicts with Page Load Interaction on iOS Safari.

As iOS Safari doesn’t support background video autoplay,
I turned off the component on mobile using the visibility tabs.

Webflow_-_Video_Background___Loading_Test

However, it just apply the css “display:none;” on the video component
and iOS Safari still keeps downloading mp4 and webm on background and causes delay.

Furthermore, on iOS safari, the interaction trigger “When Page Finishes Loading”
won’t be triggered until all the videos (mp4 and webm) are downloaded completely,
and thus, if I use a page preloader animation, the page won’t show up for ages…

36b81e0996354b5f8fd98fb4cfbc219c5bcd8eec_1_690x454

I’d appreciate if you check this issue and fix the bug or provide any solutions!
Thx.


I created a sample site.

The site url: http://hctest.webflow.io/
(Please try opening this page on your iOS device to check the issue.)

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

Hi @gurigurico

Thank you so much for reaching out and for these great questions.

1. Hiding the video component on smaller devices

Web elements or HTML elements are the building blocks of a webpage. So, as long as you’re serving the same page on all devices, the background video element is part of your webpage even when hidden. So, it will load but not show on the page when you hide it in the design.

Note that the device visibility feature is just an easier way for you to hide any element without the need to manually create a css class for that element if you only need to apply a display:none property.

2. “When page finishes loading” Interaction

You can deactivate the interaction on the mobile devices just like you set the visibility of the video element:
https://cl.ly/130u0D081D2u/Image%202017-11-28%20at%203.09.06%20PM.png

Note, initial state actions apply on all devices. So, make sure to revise any initial state actions and try instead to use the style panel to set any initial states for your elements.

Also, note that your background video is very large(~22mb). We recommend that you use videos smaller than 5mb to optimize load speed.

Please, let me know if this is helpful or if you have any additional questions, I’m happy to help further.

Kindest regards,
Anna

Thanks for your advice!
Yes, I’ve tried so. But still I’m in trouble…

The initial state shows preloader and all the contents are opacity 0.
In this case:

  • If I switch off the loading animation on mobile, still the initial states can’t be switched off, and thus contents will never show up.

  • If I turn on the animation on mobile, only when completing video downloads, can I see the contents. It takes ages to load the entire videos and see the contents…

  • If I apply these styles on the style panel rather than initial state actions as you say, the contents will be invisible and cannot edit the design anymore on the Webflow designer.

Also, the background video download doesn’t work as streaming on iOS Safari, it will cause queue block of loading resources such as js and image files. I suppose Webflow should implement this kind of script.

https://stackoverflow.com/questions/28605591/prevent-html5-videos-from-downloading-the-files-on-mobile-videojs

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