Change html background to image from video if on mobile-CodePudding

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 onl oad="document.body.style.opacity='1'">
  <video autoplay playsinline muted>
      <source src="/static/img/login.mp4" type="video/mp4">
    </video>
</body>

</html>

CodePudding user response：

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.

CodePudding user response：

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 onl oad="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>

CodePudding user response：

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>