What is the best way to remove html5 video backgro

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

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

Answer 2

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.

Answer 3

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.