Solution 1 :

I was able to fix this. It was an encoding issue of the webm, ogv and mp4 format in the end. I used an online converter tool and tried again, this time it works.

Problem :

after looking for hours and finding that encoding and playsinline is a good starting point to look I still couldn’t figure out on my current project why html5 video on iOS won’t play back.

<video class="loop_video desktop_video" width="100%" height="100%" loop="" muted="" playsinline="" data-play="yes">
        <source src="" type="video/mp4">
        <source src="" type="video/webm">
        <source src="" type="video/ogv">

This plays back in all browsers on Desktop devices, but somehow always leaves a blank white space on mobile (iOS Chrome). The video container is there (meaning the size of the section seems to be rendered, but the video element itself is simply a white space.

What could possible reasons for this be so I can investigate further, any ideas?



Leave a Reply

Your email address will not be published. Required fields are marked *