css - Background video does not play on mobile? -

i've made landing page video plays @ background of form.
it's working fine on desktops checked on android device using chrome, background video not play on it.

could me fix issue.

here link 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 site" alt="go site" title="go site"/></form> 

css:

    *, *:before, *:after {   box-sizing: border-box; }  html {   overflow-y: scroll; }  body {   background: #fff;   font-family: 'titillium web', sans-serif; }  {   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: 0.25s ease;           transition: 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: 0.5s ease;           transition: 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; } 

you should have on kind of jquery plugin.

otherwise, instead of having .mp4 format, should provide .webm , .ogv formats alternatives have better compatibility on browsers , devices. should have "fallback" image poster="videos/poster.png" in following example. in case none of format works used browser / platform, image displayed instead of video.

you have convert video .webm , .ogv.

as i'm still myself looking converting tool (no ugly banner after convert , stuff), couldn't give advice 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'