HTML5 Video not playing on IOS devices but works fine everywhere else

Question

I am trying to create a front page that autoplays a video with full width and full height. It works fine on my machine (Linux [name] 4.15.0-33-generic #36-Ubuntu SMP Wed Aug 15 16:00:05 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux) in FireFox and Chrome. When testing on my iPhone and mac the video is replace with a blank screen.

I read online that IOS dropped support for video autoplay. Is there a way to get around this?

Is WebM support for IOS?

<video autoplay loop muted playsinline>
  <source src="static/video/video.webm" type="video/webm"/>
  Your browser does not support the video tag.
</video>

Answer 1

I was able to fix my problem by adding the following sources to the video tag:

<video autoplay loop muted playsinline>
    <source src="devstories.webm" 
          type='video/webm;codecs="vp8, vorbis"' />
    <source src="devstories.mp4" 
          type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
  Your browser does not support the video tag.
</video>