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?

Bal

i think chrome and safari doesn't allow auto-playing of videos, it will only work in muted mode. – Transcontinental

Possible duplicate of https://mcmap.net/q/1013296/-background-video-is-not-playing-in-safari-browser-on-mobile-and-desktop – Karlene

Here's the official blog post about the restrictions in case it's helpful: webkit.org/blog/6784/new-video-policies-for-ios – Uranous

Answer 1

UPDATE

As stated in initial post I was using a video background for site origins plugin for Wordpress.

Although the plugin hadn't been updated in recent times, an update was available on GitHub here: https://github.com/BGStock/jquery-background-video/blob/master/jquery.background-video.js

Adding this new file/overwriting the old one resolved the issue on iOS. Hope this helps anyone else using this particular plugin.

Bal

Answer 2

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>

Brander

Hi @Ganeshkumar K, this was missing from my set up (in the script section) but still doesn't work on Safari iOS??? – Bal

If u could setup your code in codepen/jsfiddle and share the link, then I can look better into it. – Brander

Thanks @Ganeshkumar K. Found the resolution to the issue on GitHub, and updated in an answer. – Bal

Answer 3

Just add "playsinline" along with mute and autoplay.. that's it..

<video autoplay loop muted playsinline src="..."></video>

Goodlooking

This should be the correct answer. – Storfer

Answer 4

i think chrome and safari doesn't allow auto-playing of videos, it will only work in muted mode.

<video muted autoplay>
</video>

i believe you can also start the autoplay with js

<script>
    document.getElementById('so_bgvideo_5df3a8b601042').play();
</script>

Transcontinental

Hi Nijeesh, the video is in muted mode as per attribute. – Bal

sorry, is that a question or are you suggesting me something ? – Transcontinental

Hi, I have all the attributes suggested already in video element and script... and is still not working for me. Any other ideas please? – Bal

have you tried triggering the play with JavaScript ? also which browser you are having issue with ? may be take a look at this:- #34765376 – Transcontinental

Answer 5

Try removing the ="" ? not sure if that will do it..

<video id="so_bgvideo_5df3a8b601042" class="so_video_bg jquery-background-video is-playing is-visible" loop autoplay playsinline muted data-bgvideo="" poster="https://4f15fi427agh15x4ol42ijp7-wpengine.netdna-ssl.com/wp- content/uploads/video-marketing-1920x1080.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; z-index: 999;">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="https://mywebsite.com/video.webm" type="video/webm">
</video>

Maybe add this script? this work for me in safari.

<script>
    document.getElementById('so_bgvideo_5df3a8b601042').play();
</script>

Proteinase

Hi Niroh, the ="" aren't in the code set up. They are added by Chrome and there when I inspected. – Bal

Answer 6

I encountered same issue in Safari only and already tried every ways such as adding playsinline within video tag which doesn't work. Converting .mp4 video link to BLOB in javascript worked wonder for me.

Initially, define id (e.g. id="ForcePlay") in video source tag:

 <video id="ForcePlay" width="500px" height="500px" muted playsinline controls> 
    <source src="url path to your video file" type="video/mp4">
 </video>

Create your javascript within your html file, here we convert the video link to blob:

<script type="text/javascript">
  function makeURL(object) {
    return (window.URL) ? window.URL.createObjectURL(object) :    
    window.webkitURL.createObjectURL(object);
  }

  async function display(videoStream){
    var myvideo = document.getElementById('ForcePlay');
    let blob = await fetch(videoStream).then(r => r.blob());
    var videoUrl= makeURL(blob);
    myvideo.src = videoUrl;
  }

  display('url path to your video file');
</script>

Troostite

Answer 7

I have a full code working here, just copy and edit :)))

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>page_trouble</title>
    <meta charset="utf-8" />
    <style type="text/css">
    
  * {
 margin:0;
 padding:0;
 }
 
  
 video#bgvid {

  min-width: auto; min-height: 150vh;
  width: auto; height: auto; z-index: -100;
  background-size: cover;
}
  
  
</style>
    
    
</head>
<body style="background-color:black;">


    <video autoplay loop muted playsinline id="bgvid" >
<source src="fleur_trouble.mp4" type="video/mp4""
<source src="fleur_trouble.webpm" type="video/webpm""


</body>

</html>

Inhume

Please provide additional details in your answer. As it's currently written, it's hard to understand your solution. – Monody