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…
Was just about to post in the forum asking the same thing.
I have background video elements on desktop version that I would prefer to have just a still image of the video on mobile. Is there an easy hack to not load the video on mobile?
I can think of a workaround – overlaying still image of video that is hidden on desktop but shown on mobile…
An approach to consider would be to load the video via JavaScript and only for the media query you wish to target. That way video is not loaded unless the script injects the HTML, based on the windows.matchMedia() method. Of course this would require custom code and either HTML5 video or a player you can load via JS.
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.
add an ID to the Background Video element settings, e.g. my-background-video
add an Embed element with code to detect the above ID on smaller screens and remove the src attributes (optionally: remove the video element itself)
<script>
// prevent loading a video on smaller screens
if(window.matchMedia('screen and (max-width: 991px)').matches) {
const myVid = document.getElementById("my-background-video");
if(myVid) {
const myVidSrcs = myVid.getElementsByTagName("source");
// guarantee src URLs are not present
for (const vidSource of myVidSrcs) {
vidSource.src = "";
}
myVid.remove(); // remove the unneeded element
};
}
</script>
On the above script, you can further:
Replace my-background-video with the ID you used in the Webflow video element
Adjust the 991px to a value more according to your needs
This was a mare for me. But I think I figured it out.
By including a script in the footer of the page (go to the page settings)
Put this in:
<script>
// Prevent loading the video on smaller screens
if (window.matchMedia('screen and (max-width: 991px)').matches) {
console.log("Script executed!"); // Add this line to log a message
const videoElement = document.getElementById("a8637146-2791-aa80-16b1-80a6fadfa088-video");
if (videoElement) {
const videoSources = videoElement.getElementsByTagName("source");
// Guarantee src URLs are not present
for (const source of videoSources) {
source.src = "";
}
videoElement.remove(); // Remove the video element
}
}
</script>
This worked for me but it was still loading the div block housing the video. Therefore I used this:
<script>
// Prevent loading the video on smaller screens
if (window.matchMedia('screen and (max-width: 991px)').matches) {
console.log("Script executed!"); // Add this line to log a message
const videoElement = document.getElementById("a8637146-2791-aa80-16b1-80a6fadfa088-video");
if (videoElement) {
const videoSources = videoElement.getElementsByTagName("source");
// Guarantee src URLs are not present
for (const source of videoSources) {
source.src = "";
}
videoElement.remove(); // Remove the video element
}
// Remove the entire <div> element with class "background-video-2 w-background-video w-background-video-atom"
const backgroundVideo = document.querySelector(".background-video-2.w-background-video.w-background-video-atom"); // Select the div by its class
if (backgroundVideo) {
backgroundVideo.remove(); // Remove the entire div
}
}
</script>
Make sure you change your video ID names and elements. I doubt yours are the same as mine.
I can’t see the video in the code of my website anymore… but I still see packets beings downloaded. Performance increased slightly. But this is as far as I got.
@Sam_Allen - it’s been a while so I don’t recall everything about this, but I believe you just need to move your video background to an HTML embed. Then you can place that code in the footer section of the page using the page settings.
