HTML Video not working on mobile

Question

I have a full width background video with autoplay and loop propreties and works really good on desktop but in mobile video dont show and dont start... just show a black screen

I need to fix this for mobile, if that's not possible to put video working on mobile I can put a background image on mobile

<video autoplay loop muted autobuffer preload="auto" poster="poster.png" class="background-video">
        <source src="video.webm" type='video/webm; codecs="vp8.0, vorbis"'>
        <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
        <source src="video.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
    </video>

Answer 1

adding playsinline attribute to the video tag fixed the issue for me.

according to a good google search, on mobile the Video element falls back to a poster... be mind full of video size so they user will not encore massive data usage charges and to maintain a responsive site.

<video playsinline autoplay loop muted id="myVideo"></video>