Background video does not play on mobile?

Question

I've made a landing page where video plays at the background of a form.
It's working fine on desktops but I checked on my Android device using Chrome, the background video does not play on it.

Could anyone help me to fix the issue.

Here is the link to my fiddle.

HTML:

   <p>
<video autoplay="" id="video" loop=""><source src="http://www.mygreencity.in/Enquiry.mp4" type="video/webm" /> <source src="Enquiry.mp4" type="video/mp4" /></video>
</p>  

<form action="" class="form" method="post">


<p><input name="enq_name" placeholder="Full Name" required="" type="text" autocomplete="off" alt="Full Name" title="Full Name"/></p>

<p><input name="enq_mobile" placeholder="Mobile Number" required="" type="number" autocomplete="off" alt="Number" title="Number"/></p>

<p><input name="enq_email" placeholder="Email" required="" type="email" autocomplete="off" alt="Email ID" title="Email ID"/></p>
<input class="button button-block" name="enq_submit" type="submit" value="Go To Site" alt="Go To Site" title="Go To Site"/></form>

CSS:

    *, *:before, *:after {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
}

body {
  background: #fff;
  font-family: 'Titillium Web', sans-serif;
}

a {
  text-decoration: none;
  color: #1ab188;
  -webkit-transition: .5s ease;
          transition: .5s ease;
}
a:hover {
  color: #179b77;
}

.form {
  background: rgba(19, 35, 47, 0.9);
  padding: 40px;
  max-width: 600px;
  margin: 80px auto;

  border-radius: 4px;
  box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
}


h1 {
  text-align: center;
  color: #ffffff;
  font-weight: 300;
  margin: 0 0 40px;
}

label {
  position: absolute;
  -webkit-transform: translateY(6px);
      -ms-transform: translateY(6px);
          transform: translateY(6px);
  left: 13px;
  color: rgba(255, 255, 255, 0.5);
  -webkit-transition: all 0.25s ease;
          transition: all 0.25s ease;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  font-size: 22px;
}

input, textarea {

  font-size: 22px;
  display: block;
  width: 100%;
  height: 100%;
  padding: 5px 10px;
  background: none;
  background-image: none;
  border: 1px solid #a0b3b0;
  color: #ffffff;
  border-radius: 0;
  -webkit-transition: border-color .25s ease, box-shadow .25s ease;
          transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus, textarea:focus {
  outline: 0;
  border-color: #1ab188;
}

textarea {
  border: 2px solid #a0b3b0;
  resize: vertical;
}


.button {
  border: 0;
  outline: none;
  border-radius: 0;
  padding: 15px 0;
  font-size: 2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  background: #1ab188;
  color: #ffffff;
  -webkit-transition: all 0.5s ease;
          transition: all 0.5s ease;
  -webkit-appearance: none;
}
.button:hover, .button:focus {
  background: #179b77;
}

.button-block {
  display: block;
  width: 100%;
}

.forgot {
  margin-top: -20px;
  text-align: right;
}

p {
margin-bottom: 40px;
}


video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
  background: #fff;
  background-size: cover;
  transition: 1s opacity;
}

div{
margin:20px;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

input[type=number] {
-moz-appearance: textfield;
}

Solution 1

You need a couple more attributes for your video element

<video autoplay loop muted playsinline id="video-background" poster="images/poster.jpg">

Safari and Chrome for mobile made changes on how video on mobile acts. By default, it can only autoplay when the video is muted. But for webkit/iOs you also need a second attribute; playsinline. This attribute makes it so that it plays inline, rather than jumping to fullscreen video.

Also make sure your mobile devices are not running in Low Power Mode if you’re targeting iOS 11. If you’re on Chrome For Android, Data Saver mode will also prevent auto play and thus won't show the video. There's not anyway around this.

Solution 2

CSS:

#section-video video {
   display: block; 
}

give the diplay block instead of none in the corresponding css file.

Solution 3

You should have a look on this kind of jQuery plugin.

Otherwise, instead of only having a .mp4 format, you should provide some .webm and .ogv formats alternatives as well to have a better compatibility over browsers and devices. You should also have a "fallback" image like the poster="videos/poster.png" in the following example. In case none of those format would works with the used browser / platform, this image is displayed instead of the video.

You will have to convert your video into .webm and .ogv.

As I'm still myself looking for a good converting tool (no extra ugly banner after the convert and stuff), I couldn't give you some advice about this.

<video id="bgVideo" autoplay poster="videos/poster.png">
    <source src="http://www.mygreencity.in/Enquiry.mp4" type="video/mp4"/>
    <source src="http://www.mygreencity.in/Enquiry.webm" type="video/webm"/>
    <source src="http://www.mygreencity.in/Enquiry.ogv" type="video/ogg"/>    
</video>

Good Luck'