'Change html background to image from video if on mobile

I'm currently developing a website which uses an autoplay video background, however this scales badly on mobile and only sits in the top third of the screen...

Would it be possible in CSS to detect a mobile user, and change the background to a suitable portrait image?

You can view the webpage here: https://content.obstrude.com/login

As you can see, the video works nicely on PC, however on mobile fills the top third of the screen!

video {
  width: 100%;
  height: auto;
  object-fit: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

img {
  opacity: 0;
  filter: alpha(opacity=50);
  /* For IE8 and earlier */
}
<html>

<head>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">

  <title>
    OBSTRUDE - LOGIN
  </title>
</head>

<body onload="document.body.style.opacity='1'">
  <video autoplay playsinline muted>
      <source src="/static/img/login.mp4" type="video/mp4">
    </video>
</body>

</html>
htmlcssimagevideomobile


Solution 1:[1]

Yep you could use a media query to detect a narrow screen width.

Something like this:

// this would affect screen widths up to 600px
@media screen and (max-width: 600px) {
  .className {
    /* put your mobile styles here */
  }
}

Check out this article on the matter https://css-tricks.com/a-complete-guide-to-css-media-queries/

For your exact use case, I would recommend doing away with the video altogether and instead using css animations to achieve the same effect. You can then instead adjust them to also animate on mobile in the way that you want.

Solution 2:[2]

Here is a basic example using media-queries.

Resize the browser to see it work.

video {
  width: 100%;
  height: auto;
  object-fit: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

img {
  opacity: 0;
  max-width: 100%;
  width: 100%;
  height: auto;
  object-fit: cover;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  /* For IE8 and earlier */
}

@media only screen and (max-width: 600px) {
  img {
    opacity: 1;
  }
  video {
    opacity: 0;
  }
}
<html>

<head>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
  <title>
    OBSTRUDE - LOGIN
  </title>
</head>

<body onload="document.body.style.opacity='1'">
  <video autoplay playsinline muted>
      <source src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
    </video>
  <img src="https://dummyimage.com/600x400/000/fff&text=Could+also+use+this+as+poster.">
</body>

</html>

Solution 3:[3]

You can also toggledisplay property from none to block and vise-versa to switch between video and image depending upon the size of the screen.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      img {
        display: none;
      }
      @media screen and (max-width: 480px) {
        video {
          display: none;
        }
        img {
          display: block;
        }
      }
    </style>
  </head>
  <body>
    <div>
      <video autoplay muted>
        <source src="sample.mp4" type="video/mp4" />
      </video>
      <img src="https://via.placeholder.com/300" />
    </div>
  </body>
</html>

Solution 4:[4]

video {
  width: 100%;
  height: auto;
  object-fit: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

img {
     display: none;
}
@media screen and (max-width: 480px) {
video {
      display: none;
      }
img {
     display: block;
     }
   }
<html>

<head>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">

  <title>
    OBSTRUDE - LOGIN
  </title>
</head>

<body onload="document.body.style.opacity='1'">
  <video autoplay playsinline muted>
      <source src="/static/img/login.mp4" type="video/mp4">
    </video>
    <img src="/static/img/image.png">
</body>

> You just need to make display hide and show when you want.For example at mobile view you can simply make display of video none and for image make it display block

</html>

Solution 5:[5]

You can use media queries for that:

@media only screen and (max-width: 600px) {
  .background {
    background-image: xyz.png;
  }
  
  video {
   display: none;
  }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Brett East
Solution 2
Solution 3 Nidhi
Solution 4 Vishwa
Solution 5 SuperStormer

Related Questions