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:

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.

Welcome to Stack Overflow. Please read [Stack Overflow: How to ask](http://stackoverflow.com/questions/how-to-ask) and [Jon Skeet's Question Checklist](http://msmvps.com/blogs/jon_skeet/archive/2012/11/24/stack-overflow-question-checklist.aspx) to find out how to ask a good question that will generate good useful, answers. — Our Man in Bananas, Jul 07 '14 at 11:33

score 2 · Answer 1 · edited May 23 '17 at 12:24

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.

edited May 23 '17 at 12:24

Community

1
1

answered Jul 07 '14 at 13:13

Jb Drucker

972
8
14

Thanks Jb i think that will be the best solution :) – user3812110 Jul 08 '14 at 09:25
1

I would like to note this will not prevent the video from being downloaded by the user. – Benjamin Smith Aug 05 '15 at 17:55
Use modernizr or js to detect if video element is available, and then don't load the video if that video element isn't valid. – Nathaniel Flick Mar 29 '16 at 19:37

score 2 · Answer 2 · edited Aug 20 '15 at 07:57

2

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

edited Aug 20 '15 at 07:57

maskacovnik

3,080
5
20
26

answered Aug 20 '15 at 07:39

Chandra Reddy

21
4

Being Explorer · Answer 3 · 2021-07-30T11:31:18.643

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

edited Jul 30 '21 at 11:31

answered Jul 29 '21 at 17:39

Being Explorer

11
3

The post mentioned they want to avoid loading the video entirely - "but the video would still load as part of the DOM and that is what i would like to prevent." – kjones Jul 29 '21 at 22:56
data.remove() will totally remove the video element then we will need to add fallback img for that though – Being Explorer Jul 30 '21 at 11:30

Anton Koenig · Answer 4 · 2016-06-19T15:08:05.453

0

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.

edited Jun 19 '16 at 15:08

answered Jun 19 '16 at 14:58

Anton Koenig

39
1
11

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

4 Answers4

Linked