What is the best way to remove html5 video background for mobile users
html, html5-video, javascript, media-queries, responsive-design
Solution
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.
Problem
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: Can the video element be removed using JavaScript/jQuery from the DOM when it loads view-port at certain widths? Can the same video be recovered when if the view port is manually increased in with? (i suspect this is a bad approach) Will a video with "display:none;" still affect loading/battery time on a tablet/mobile ? Thanks you for you assistance.