Detect and stop loading background videos on mobile

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…

Anyone find an answer for this one? I have multiple videos that I’m trying to not load on mobile… my google page speed for mobile is crazy slow!

setting to display:none hides, it but doesn’t stop it from loading.

Plz help!

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…

Has anyone figured out a solution for this? I am also looking for some advice on this matter.

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.

Has anybody found a solution to this? I feel like this issue would prevent anybody from using 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.

The HTML:

<div class="page-hero__img d-none d-lg-block"></div>
<template type="text/template" id="homepageVideo">
    <video class="page-hero__video lazyload" loop="loop" autoplay="" muted="" poster="poster_image.jpg">
        <source src="animation.mp4" type="video/mp4">
        <source src="animation.webm" type="video/webm">
    </video>
</template>

The JS

const _t = require('lodash/template');

(function(global, $){

    mediaCheck({
        media: '(min-width: 992px)',
        /**
         * Switch to LG resolution.
         */
        entry: function () {
            $('.page-hero__img').append(_t($('#homepageVideo').html()));
        },

        /**
         * Switch to >= MD resolution.
         */
        exit: function () {
            $('.page-hero__img').empty();
        }
    });

})(window, $);