What is the best way to remove html5 video background for mobile users

Question

EXPLANATION: A customer of mine wants to have a background video running on his responsive website. However he would also like to remove it for tablet/mobile users. I know this can be done with media queries, but the video would still load as part of the DOM and that is what i would like to prevent.

QUESTIONS:

1. Can the video element be removed using JavaScript/jQuery from the DOM when it loads view-port at certain widths?

2. Can the same video be recovered when if the view port is manually increased in with? (i suspect this is a bad approach)

3. Will a video with "display:none;" still affect loading/battery time on a tablet/mobile ?

Thanks you for you assistance.

Answer 1

not sure if this might help but this snippet will stop video getting played on mobile devices also you can mute the audio here and it should show fallback img here.

const video = document.querySelectorAll('video')
              video.forEach(data=>{
                data.volume = 0 //mute audio
                console.log(data);
                  if (window.innerWidth <= 768) {
                      
                      data.autoplay=false; or //data.remove()
                  } else {
                      data.play();
                  }
                }) 

Answer 2

See this answer to detect if you're on a mobile device.

Then, using this test, you can .hide() your element using jQuery, or set its src attribute to "", to be sure it's not downloading.

Answer 3

Based on mobile dimensions use $('video').remove(). this will removes the DOM element from webpage. so it will not render in html.