Streaming live at 10am (PST)

Disable Video Background

HI all. I’m using a video background on my layout and it’s simple to use. However I don’t see any controls to deprecate the video background to a still image when viewing on mobile devices. I searched through the forum to see if anyone else is having similar concerns.

I know I can just hide it on mobile and create another instance of my section with a background image, but some comments from other users say that even though you can disable ( display: none ) with a video background element on mobile view, it will still load the video in the background on mobile device view, use additional bandwidth and result in a slower page load.

Looking for any guidance on this. Thanks!

This is not 100% webflow issue (When browser sees autoplay he start playing). Webflow use poster attribute (Like “lazy-loading effect” of video).

https://www.w3schools.com/tags/att_video_poster.asp

If you want to stop the video from autoplay on mobile use this code:

stop video by code

**trick for one video - in this example if the screen width is less than 640. For more than one video its easier to use Jquery.

Set id “my-video” for the video
image

Copy-paste before head

<!-- stop bg video on mobile -->
<script>
document.addEventListener('DOMContentLoaded', (event) => {
    var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
    if (viewportWidth < 640) {
        var bgVideo = document.getElementById('my-video');
        bgVideo.childNodes[0].removeAttribute("autoplay");
        bgVideo.childNodes[0].setAttribute("preload", "none");
    } else {
        console.log('big viewport');
    }
})
</script>

But this is also not solving your issue (The video still will be under the “assets waterfall”). But give it a try

Remove video

Remove by JS not removing this asset from the waterfall:
image

Summary: Its hard to solve this after the video is in the DOM (but again try this examples - and test the effect).

1 Like

Thanks for explaining. Can you clarify “assets waterfall”? Does that mean even if you use javascript to disable the video from autoplay at a specific screen size such as your example of 640px wide, it will still load the full video file in the background of the browser such as seen here: https://developer.mozilla.org/en-US/docs/Tools/Performance/Waterfall ?

I’m a designer accustomed to Wordpress Page builders (Divi, Uncode, Elementor) with limited knowledge of anything beyond basic javascript and HTML/CSS. So excuse my ignorance as I try to understand the mechanism behind the code that loads a webpage.

My concern is page load and not asking my audience to eat up heavy data to view a page on mobile unless they actively want to engage with a video by clicking a play button.

In my opinion, if you stop the video + set preload to none - the site speed should be fine (But this kind of tricks need to be tested).

Yes, This kind of waterfall (site assets). Anyway, the poster attribute solves the first-load issue.

Related (Like you see no one answer + I dont find a way to remove the video from the waterfall):

You success to use my code in your project? (This is only copy-paste) issue

waterfall issue

In general when you manipulate the DOM you first need to select the element. So :frowning: no way to remove video entirely without first loading the element in the DOM.

Anyway - Webflow sites are very very fast (Better than avarge wordpress site) - i dont think this video should be an issue.

For anyone looking to do this I used the following method and it works:

Place your background video on a hidden page to start which will allow you to get the urls of the mp4 and webm files:

Save those to URLs for use later.

Create an HTML embed inside of your masthead or whatever element you want the background video and use code similar to the following:

<div class="masthead-bg-video">
  <video id="mastheadVideo" autoplay="" loop="" style="background-image:url(&quot;https://uploads-ssl.webflow.com/5ced5d1ae54ddde5fd2b02b9/5d0943da9c7900bb0ed80b89_Clouds - 1154-poster-00001.jpg&quot;)" muted="" playsinline="" data-wf-ignore="true">
<source data-src="https://uploads-ssl.webflow.com/5ced5d1ae54ddde5fd2b02b9/5d0943da9c7900bb0ed80b89_Clouds - 1154-transcode.mp4" data-wf-ignore="true">
<source data-src="https://uploads-ssl.webflow.com/5ced5d1ae54ddde5fd2b02b9/5d0943da9c7900bb0ed80b89_Clouds - 1154-transcode.webm" data-wf-ignore="true">
  </video>
</div>

Replace the data-src values (between the “”) with your values copied above. You can also use any ID for the video element, mind is “mastheadVideo” but just make sure to note what you change it to if you decide to :slight_smile:

You then need to go to custom code in your site settings and go to the footer code section and paste in the following code:

<script>
  $(function() {

    /**
   * jQuery.browser.mobile (http://detectmobilebrowser.com/)
   *
   * jQuery.browser.mobile will be true if the browser is a mobile device
   *
   **/
    (function(a){(jQuery.browser=jQuery.browser||{}).mobile=/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);
    
    // console.log(jQuery.browser.mobile);
    
    var bgv = $('#mastheadVideo');

    if (jQuery.browser.mobile == false) {
      $('source', bgv).each(
        function() {
          var el = $(this);
          el.attr('src', el.data('src'));
        }
      );

      bgv[0].load();
    }    
  });
</script>

So a quick explanation:

The first function is the mobile browser detection, provided by detectmobilebrowser.com, which has tablets off by default, but they are easy to add to the regex, just see their documentation.

I have a console log in there for testing, but comment it out for production. You should be able to open your site with the console open and get a false for desktop browsers and true for mobile, you can switch user agents in the network conditions panel in Chrome for testing.

Then comes the fun part, basically if no mobile browser is detected, find each bgv element, in my case only one since I’m searching for an ID, but if you have a class this will loop through each one and replace each with the value found in the data attribute “data-src”. Thus you are not loading the video on page load, only if no mobile browser is found does the video source actually get loaded. Thanks to this SO post for help: https://stackoverflow.com/questions/43984623/stop-video-from-loading-in-background-on-mobile and @Siton_Systems for putting me on the right path.

Now we can test this in Chrome:

image

Here we see a false return for mobile browser detected and if we look at the network waterfall:

Then we change the user agent to an iPhone:

Refresh the page with the console open:

image

We get the true that a mobile browser is detected.

Now check the network waterfall:

Largest files loaded are images, no video present. You should see the amount of data transferred drop and load time drop!

2 Likes

@sam-g argh, I’m really trying to make this work but it simply won’t work for me. All it shows is the clouds image, but doesn’t load the video on desktop. Not sure what I’m doing wrong.

Any chance you could lend me 5 mins to check it out?

@Justino - wow totally forgot about this.

It looks like you have an error in the js:

image

See this in my original post:

Replace the data-src values (between the “”) with your values copied above. You can also use any ID for the video element, mind is “mastheadVideo” but just make sure to note what you change it to if you decide to :slight_smile:

Not working on my end either. Did you get it working Justino? I am running into the same problem

@RobJames - what error are you getting? Posting your published site link is helpful as well.

Same issue as Justino, I am only seeing the clouds image.

Footer Code:

       <script>
  $(function() {
    mastheadHeight();

    /**
   * jQuery.browser.mobile (http://detectmobilebrowser.com/)
   *
   * jQuery.browser.mobile will be true if the browser is a mobile device
   *
   **/
    (function(a){(jQuery.browser=jQuery.browser||{}).mobile=/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);
    
    // console.log(jQuery.browser.mobile);
    
    var bgv = $('#mastheadVideo');

    if (jQuery.browser.mobile == false) {
      $('source', bgv).each(
        function() {
          var el = $(this);
          el.attr('src', el.data('src'));
        }
      );

      bgv[0].load();
    }    
  });
</script>

Embed Code:

<div class="masthead-bg-video">
  <video id="mastheadVideo" autoplay="" loop="" style="background-image:url(&quot;https://uploads-ssl.webflow.com/5ced5d1ae54ddde5fd2b02b9/5d0943da9c7900bb0ed80b89_Clouds - 1154-poster-00001.jpg&quot;)" muted="" playsinline="" data-wf-ignore="true">
<source data-src="https://uploads-ssl.webflow.com/5f63ac786edbcc7588738790/5f9affc9b063204c1259613f_HERO-VIDEO%20(1)-transcode.mp4" data-wf-ignore="true">
<source data-src="https://uploads-ssl.webflow.com/5f63ac786edbcc7588738790/5f9affc9b063204c1259613f_HERO-VIDEO%20(1)-transcode.webm" data-wf-ignore="true">
  </video>
</div>

Appreciate any help @sam-g :slightly_smiling_face:

@RobJames

Okay, so this is my fault, the mastheadHeight function isn’t defined, just remove the function call:

<script>
  $(function() {
  
    /**
   * jQuery.browser.mobile (http://detectmobilebrowser.com/)
   *
   * jQuery.browser.mobile will be true if the browser is a mobile device
   *
   **/
    (function(a){(jQuery.browser=jQuery.browser||{}).mobile=/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);
    
    // console.log(jQuery.browser.mobile);
    if($('#mastheadVideo').length > 0) {
      var bgv = $('#mastheadVideo');

      if (jQuery.browser.mobile == false) {
        $('source', bgv).each(
          function() {
            var el = $(this);
            el.attr('src', el.data('src'));
          }
        );

        bgv[0].load();
      }      
    }
  });
</script>

Great thanks!

Is there a way to set the video size so its fits 100 vh? 100 vw?

Can confirm video now does not load on mobile !!

@RobJames -

On my larger screen size (27") the video isn’t stretching to fit.

Anyway to fix that in the code? Or should I just upload a larger file size?

@RobJames Sorry, change that width property in the screenshot.

Got it thanks again!

Hello Ezra,

Luckily I found this post.

I am trying something with background videos,

I want to show different background videos based on which button a user clicks.

From all the different background videos uploaded, only half needs to be shown to the user. (show/hide based on clicks)

But the background videos uploaded are making the page load very slow.
I found that adding preload=none helps.

Could you please help me with

how to set all background videos preload =none, by default.
load a particular bg video based on user click.

I am not a coder, but I just need some general direction, I will figure out the rest.
Any help would be great.
Thanks!