Streaming live at 10am (PST)

Disable Video Background

#1

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!

#2

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

#3

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.

#4

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.