0

Works perfectly on all sizes in a desktop or notebook computer, but when i see it on a mobile it looks like the image.

.video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translate(-50%, -50%);
}
<video controls autoplay muted loop id="myVideo">
    <source src="img/Smartphone - 3180.webmsd.webm" type="video/webm">
 </video>

In mobile instead of autoplaying it stays like that, the video is in webm format

Smokey Dawson
  • 8,827
  • 19
  • 77
  • 152
  • Hi @juan, Please refer: https://stackoverflow.com/questions/38893692/html-video-not-working-on-mobile – Alexis Mar 14 '19 at 20:21

1 Answers1

1

A lot of mobile browsers do not support autoplay on mobile devices, however, on updated versions of chrome for android, as well as browsers on iOS, they should be able to autoplay the video as long as it is muted.

Check out this answer as well

Edit: Looks like you also need to have the attribute playsinline on your video element for it to work.

<video controls autoplay muted playsinline></video>

This forum mentioned the playsinline attribute that is needed to work

Chris
  • 1,484
  • 1
  • 12
  • 19