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 scr

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>

Answer 2

Turns out the video actually plays - but it's weird how that happens! First of all, I'm testing on Android 5.1.1. Alright, here's the situation: On load, the video doesn't play but instead displays the fallback poster image. I had given up on the video thing, but when I was navigating the site and at some point decided I wanted to go back Home, I navigated to the Homepage and the video was playing! I tried refreshing the page, and the video didn't play on load but instead got the poster image! What could be happening? I figured just clicking the phone's back button to navigate to the homepage still didn't play the video, but explicitly clicking the home link did! So I gave it another shot - refreshed the page, video didn't play, clicked the home link and the video started playing on load! This is the structure of my home link: <a href="./"><img src="path-to-logo" /></a> Can somebody explain what could be happening?

Answer 3

The Autoplay tag on mobile is generally not supported - this is to avoid users incurring data transfer costs as video files are large and can eat into data limits.

The poster tag should work fine, however, as I think you noted in your last comment.