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.
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.
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 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.
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
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: javascript - Stop video from loading in background on mobile - Stack Overflow and @Siton_Systems for putting me on the right path.
Now we can test this in Chrome:
Here we see a false return for mobile browser detected and if we look at the network waterfall:
@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?
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:
no way to remove video entirely without first loading the element in the DOM.
