Background video not playing on desktop or mobile

Hi

I am trying to get the video background to work on mobile - http://fluid-pixels.com/demo.html

<div class="video-wrap">

<video playsinline preload="auto" loop autoplay muted src="images/videos/Hello.mp4" type="video/mp4"> </video>
<video playsinline preload="auto" loop autoplay muted src="images/videos/Hello.webm" type="video/webm"> </video>
<video playsinline poster="images/videos/hello.jpg"> </video>

<div class="video-overlay" style="background-color: rgba(0,0,0,0.2);"></div>
</div>

I have added in "playsinline" to the video tag - see above code sample, but when I try and preview the site on my iPhone using IOS12 Safari and Chrome all I get is a black screen.

Can you please advise, as from what I have been reading playsinline should be working?

Thanks,

Ben