HTML5 Video plays on macOS safari, not iOS Safari

Question

Everything seems to work in Safari and Chrome on the desktop. But iOS is not cooperating.

Here's how I encoded the video:

ffmpeg -an -i orig.mp4 -vcodec libx264 -crf 30 -maxrate 900 -pix_fmt yuv420p -profile:v baseline -level 3 homepage.mp4

Here's my html:

<video id="bgvid" playsinline muted autoplay loop src="/assets/videos/homepage.mp4" type="video/mp4"></video>

Here's my css:

video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    transition: 1s opacity;
}

If you'd like to see for yourself: 2606southave.com

Answer 1

The culprit is your CSS:

@media screen and (max-device-width: 800px) {
  #bgvid { display: none; }
}

You're telling it not to display when the width is 800px or less.

---

As for ffmpeg, I recommend adding the -movflags +faststart output option so the video can begin playback while still being downloaded. -maxrate value is in bits, so you probably meant 900k. Your video is exceeding the limits for Level 3, so just remove -level and let it choose the level. Consider using -profile:v main instead of baseline if you don't need to support very ancient devices and you'll take advantage of some better compression.