iOS html5 <video> doesn't play as expected

Smartphone users of my webpage should get the embedded background introduction video in the 9:16 format. However, on iOS, they get only the poster jpg which is deposited for the 9:16 mp4 in the case the line is too slow. On a test iPad in the portrait orientation the 9:16 video works, I don' understand why? On iPhones the orientation doesn't matter (no playback). The video plays as expected on all tested Android phones and the Chrome device simulator.

Here is only the code of my webpage that should handle the intro background video.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>
        Demo
    </title>
    <style>
        .videoBg{
        position: relative;
        width: auto;
        background-color: rgba(0,0,0,7.0);
        }

        @media only screen and (min-width: 900px){
         .moveMobil{
         display: none;}
        }
        
        @media only screen and (max-width: 900px){
        .moveBig {
        display: none;}
        }      
    </style>
</head>

<body>
<div class="main">
  <div class="videoBg">
    <video poster="https://mixkit.imgix.net/videos/preview/mixkit-friends-with-colored-smoke-bombs-4556-0.jpg?q=80&auto=format%2Ccompress&w=460" 
    class="moveBig" 
    src="https://assets.mixkit.co/videos/preview/mixkit-friends-with-colored-smoke-bombs-4556-large.mp4" type="video/mp4" autoplay="true" loop="true" muted="true" width="100%"></video>
    <video poster="https://mixkit.imgix.net/videos/preview/mixkit-portrait-of-a-woman-in-a-pool-1259-0.jpg?q=80&auto=format%2Ccompress&w=460" 
    class="moveMobil" src="https://assets.mixkit.co/videos/preview/mixkit-portrait-of-a-woman-in-a-pool-1259-large.mp4" 
    type="video/mp4" autoplay="true"loop="true"muted="true" width="100%"></video>
 </div>
</div>

I used as base the example code from Hossam Elnaggar https://stackoverflow.com/a/57281456/2556324 which showed so far the best display outcome.

Maybe I am gone in the false direction?


Solution 1:

Looks like the playsinline was the missing part. This post was the key: https://stackoverflow.com/a/51432655/2556324