Alternate between video and image background

Question

My website has a Video Background on a header div (and a image background in case the video don't load).

What I'm trying to do is use the video only if the person is using the web version of the site. In case of mobile version I don't want the video.

There's a way to do it?

The site: andrerodrigues.esy.es

edit your question to at least include the html markup and css you use. See [ask] — yezzz, May 05 '16 at 19:24
do you want this for speeding up mobile page load, or for another reason. In the first case you 'd want to not load the video by default, and only load it if not mobile. — yezzz, May 05 '16 at 20:00

score 0 · Answer 1 · answered May 05 '16 at 19:24

0

You could use a media query:

#video-container {
  @media(max-width: 768px) {
    display: none;
  }
}

This will just hide the element visually.

answered May 05 '16 at 19:24

phynam

445
2
10

That was my first thought. But if the mobile has more than 768px? – André Rodrigues May 05 '16 at 21:07

score 0 · Accepted Answer · edited May 23 '17 at 12:31

0

You can check the user agent string of the browser and add/remove a video tag if it is a mobile/desktop:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  // Javascript to remove video tag
}

edited May 23 '17 at 12:31

Community

1
1

answered May 05 '16 at 19:27

Uzbekjon

10,701
3
32
53

score 0 · Answer 3 · answered May 05 '16 at 19:39

0

In addition to using a media query as phynam suggested, i would use modernizr to check if the browser supports autoplay, and if not, hide the video and show the image via display:none.

https://modernizr.com/download?videoautoplay-setclasses

answered May 05 '16 at 19:39

Lynn Stahl

144
1
5

Alternate between video and image background

3 Answers3