HTML5 Video Background not playing Safari on iPhone

Question

I have the video background plugin for site origin page builder (Wordpress) and I have uploaded a background video (MP4 and WEBM formats). The file sizes are around 35mb and 17mb respectively.

I have tested on a couple of iPhones running up to date iOS with safari and the video is not autoplaying as it should (only showing fallback image).

Video Code:

<video id="so_bgvideo_5df3a8b601042" 
class="so_video_bg jquery-background-video is-playing is-visible" 
loop="" autoplay="" playsinline="" muted="" data-bgvideo="" 
poster="https://mywebsite.com/fallback-image.jpg" 
data-bgvideo-fade-in="500" data-bgvideo-pause-after="120" 
data-bgvideo-show-pause-play="true" 
data-bgvideo-pause-play-x-pos="right"
data-bgvideo-pause-play-y-pos="top" 
style="min-width: auto; min-height:auto; width: 100%; height: auto;
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
transition-duration: 500ms;">
<source src="https://mywebsite.com/video.mp4" type="video/mp4">
<source src="https://mywebsite.com/video.webm" type="video/webm">
</video>

As far as I can tell the video contains the attributes required via Safari (and it plays fine on Safari desktop).

Can anyone please advise a fix to get it working on Safari mobile?

Answer 1

Safari doesn't allow autoplay of video on these 2 scenarios

1. when "muted" config not set
2. when iphone is in battery saving mode or in low battery

---

To achieve autoplay, enable mute and autoplay in both attribute and via js like

<video id="BgVideo" muted autoplay>

<script>
var bgvideo = document.getElementById("BgVideo");
bgvideo.muted = true;
bgvideo.play();
</script>