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).

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() {
    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>

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!

1 Like