Streaming live at 10am (PST)

Don't load background video on Tablet and Mobile


#1

Hi there,

I’m looking to improve the load time on my home page that uses a background video, on tablet and mobile.

I’d like to detect if the user is on a tablet or mobile device and if true, not load the background video: #bg-vid__home

I’m aware that this could be done using Modernizr or jquery media queries… just looking for best advice on the way to go.

https://preview.webflow.com/preview/nbc-ui-kit?preview=163bd5033888dfa5faddb10e04120ec2

Best,

Joe


#2

I think I’ve got it, just replace #bg-vid__home with the id of your video element.

What do you guys think? Is there a better way of doing this?

<script>
  if (document.documentElement.clientWidth < 992) {
    var a = document.querySelector("#bg-vid__home"); 
    var b = document.querySelector("#bg-vid__home > video"); 
    var c = document.querySelector("#bg-vid__home > video > source:nth-child(1)"); 
	var d = document.querySelector("#bg-vid__home > video > source:nth-child(2)"); 
    
    a.setAttribute("data-autoplay", "false");
	b.removeAttribute("autoplay");
    c.removeAttribute("src");
    d.removeAttribute("src");
}
</script>

Best,

Joe