В моб.версии не отображает фoнoвoe видeo у блока... как поправить?

Не отображается видео....

Если на компе нормально:

[ATTACH]165203[/ATTACH]

то на айфоне его НЕТ!

[ATTACH]165204[/ATTACH]

как поправить?

Размещено здесь http://opt-from-china.ru/

css

.stopfade {opacity: .5;}
.wrapper{max-width:990px; max-height:390px; margin:0 auto; overflow: hidden; position:relative;}
a{color:#fff;}
a:hover{text-decoration: none;}
video{min-width:100%;}
#info-block{font-family: 'Comfortaa', cursive; font-weight:100; background: rgba(0,0,0,0.3); color: white; padding: 2em; width: 87%; margin:2em; position: absolute;
z-index:1000; right:0%; top:0; font-size: 1em;}
#info-block h1{font-size: 1.3em; margin-bottom: 20px;}
#info-block p{font-size:.9em; margin-bottom: 10px;}
#info-block button{display: block; width: 80%; padding: .4em; border: none; margin: 1rem auto; font-size: 1.3em; background: rgba(255,255,255,0.23); color: #fff; 
border-radius: 3px; cursor: pointer; transition: .3s background;}
#info-block button:hover {background: rgba(0,0,0,0.5);}

html

<div class="wrapper">     
    <video autoplay id="bgvid" loop>
        <source src="/foto/video.webm" type="video/webm" />
        <source src="/foto/video.mp4" type="video/mp4" />
        Òåã video íå ïîääåðæèâàåòñÿ âàøèì áðàóçåðîì.
        <a href="/foto/video.mp4">Ñêà÷àéòå âèäåî</a>.                
    </video>      
    <div id="info-block">
       <table width="900" cellpadding="0" cellspacing="0" border="0" align="center">


<tr height="70"><td colspan="2" align="center" valign="top">
<br>
<span class="zagolovok-f1">Ôîðìà îáðàòíîé ñâÿçè</span><br></td></tr>

<tr><td align="center" valign="top">
<?php
if(isset($_POST['ok']))
{
$subject = 'Çàÿâêà ñ ñàéòà Chorda.biz';
$subject = '=?koi8-r?B?'.base64_encode(convert_cyr_string($subject, "w","k")).'?=';

$fio=htmlspecialchars($_POST['fio']);
$phone=htmlspecialchars($_POST['phone']);
$email=htmlspecialchars($_POST['email']);
$message=htmlspecialchars($_POST['message']);

$text= '<b>Âàøå èìÿ:</b> '.$fio.'
<br><b>Òåëåôîí:</b> '.$phone.'
<br><b>E-mail:</b> '.$email.'
<br><b>Ñîîáùåíèå:</b> '.$message;

$headers  = "Content-type: text/html; charset=windows-1251 \r\n";


if (mail('info-user@mail.ru', $subject, $text, $headers)) {echo "<b>Ñïàñèáî, âàøà çàÿâêà ïðèíÿòà!</b>";} else {echo "<b>Error</b>";}
}
?>
<form method="post">
Âàøå èìÿ:<br><input name="fio" type="text"><br>
Òåëåôîí:<br><input name="phone" type="text"><br>
Å-mail:<br><input name="email" type="text"><br></td>

<td align="center" valign="top" class="text1">
Èíòåðåñóåìûé òîâàð:<br><textarea name="message"></textarea><br><br>
<input id="submit" name="submit" type="submit" value="Submit">
</form> 
</td></tr>
</table>
    </div>    
</div>

js

$(function(){
   var vid = document.getElementById('bgvid');
   var pause = $('#info-block button');
    
   vid.onEnded = function(){
       this.pause();
       this.classList.add('stopfade');
   }
    
   pause.on('click', function(){
       vid.classList.toggle('stopfade');
        
       if(vid.paused){
           vid.play();
           $(this).html('Pause');
       }
       else{
           vid.pause();
           $(this).html('Paused');
       }           
   });
});