Both are asking for the same thing. I have a website of two different markups.
One for desktop and one for mobile.
I have 5 videos of ~1mb each on the desktop version, but I don’t want to load them on the mobile site.
display:none will hide them but they will still be in the background.
I don’t mind using a script to detect the video elements and have them not load on mobile.
The above issues are mine as well. Only I have more than one video.
Can someone help me improve my mobile performance? Currently Google say it’s a 10-12sec loading time because of all the video content. I don’t mind it on desktop since it’s a trade off and I need video background elements. But the mobile should load on within a few seconds ideally.
I tried the method you posted, @JoeDigital but it’s not working for me. I gave each video the same ID of “bgvid” but when I test the site on Google Dev it still loads all of the background videos…
Stumbled on this page because I wanted exclude an animation from being loaded on mobile. My solution is not specific to Webflow, so I have no idea if you can implement it the same way as I did. I also rely on three libraries that were already in my stack(loadash, jQuery and mediaCheck). But this can also be written in vanilla JS.
So what you do is add the video in a template tag. Then check the viewport and add or remove it to the DOM.