Solution 1 :

You can simply do this:

 <video style="width:100%" controls autoplay>
    <source src="content/Vik_Virt_Video_30fps_slow.mp4" type="video/mp4">
<source src="content/Vik_Virt_Video_30fps_slow.webm" type="video/webm">
</video>

Video tag can be used and it works absolutely fine on iPhones

Solution 2 :

your HTML is fine:

this is an issue with IOS

disable battery saver of your phone and try if this works,

also, check this doc: safari allows autoplay with some conditions :

https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

Problem :

i embed a Video Tag on a Website. The Video works fine on all devices and Browsers (Windows, Android) exept of IPhones.

This is my Code:

<div class="player" id="video">
    <video onloadeddata="this.play();" playsinline="" loop="" muted="">
          <source src="content/example.mp4" type="video/mp4">
          <source src="content/example.webm" type="video/webm">
    </video>
</div>

And this is my CSS for the Div and Video Tag:

video {
    width: 100%;
    height: auto;
}

.player {
    max-width: 930px;
    margin: auto;
}

Does someone can help me with this? I can post more Informations if you need.

Thank you!

By