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.

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.

• javascript
• html
• responsive-design
• html5-video
• media-queries

• 1 Wele to Stack Overflow. Please read Stack Overflow: How to ask and Jon Skeet's Question Checklist to find out how to ask a good question that will generate good useful, answers. – Our Man in Bananas Commented Jul 7, 2014 at 11:33

4 Answers 4

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.

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

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();
                  }
                }) 

You could also use css. This is much easier.

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    video {
        display:none;
    }
}

Then have an image with a negative z-index, that way when the video is not displayed, the image will appear.